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

paddingとは

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

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

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

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

marginとは

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

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

こうなりましたかね！

padding&marginの指定の仕方

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

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

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