CSS~padding&margin~

前回の記事でCSS の記述の仕方をアウトプットしましたね。
なんの話って方は前の記事を御覧ください！
https://qiita.com/akari_0618/items/1baaebc0a4946d2fa9a6
ではでは、早速やっていきましょう☺️

paddingとは

そもそもpaddingってなんぞやって思いますよね。私も思いました。最初スルーしました。
でも意外と分かるとおもしかったので一緒に学んで行きましょう。
paddingとは簡単に言うと文字の内側の余白みたいなもんですが、語彙力が凄まじくないので、実際にやっていきましょう。
前の記事では最後こんな形になっていたと思いますので、ここからスタートしていきましょう。

style.css

h1 {
  color: black;
  font-size: 40px;
  background-color: red;
  width: 15%;
  padding: 10px 20px 10px 20px;
}

少し設定を変えました。
画面上でこうなりましたか？
内側の幅を取りたい場合に使います！

paddingなんとなくわかったとこで、次はmarginやっていきましょう！

marginとは

marginを学んで行きましょう！
こちらは外側の余白を取りたいときに使います！
ではでは早速やっていきましょう！

style.css

h1 {
  color: black;
  font-size: 40px;
  background-color: red;
  width: 15%;
  padding: 10px 20px 10px 20px;
  margin: 30px 20px 10px 40px;
}

こうなりましたかね！

padding&marginの指定の仕方

style.css

padding:10px;
 こちらは４辺すべての指定になります。
padding:10px 20px;
 こちらは10pxが上と下、20pxが左右の指定になります。
padding:10px 20px 30px;
　こちらは10pxが上、20pxが左右、30pxが下の設定になります。
padding:10px 20px 30px 40px;
 こちらは10pxから時計回りに設定されています。

個人的にmarginのほうがわかりやすいなと思いましたが、３０分前まで違いがわかんなかったのですが、すぐわかるようになったので皆さんもぜひ攻略してみましょう☺️

次は、borderについて学んでいきます👍