はじめに
HTML、CSSの勉強を初めて一番最初につまづいたのが「margin」と「padding」です。
二つとも余白を作ることはわかったけど、
内側の余白？？？
外側の余白？？？
何を言っているのか分かりませんでした、、、
また要素間の余白をとりたい時に、marginとpaddingのどちらを使えば良いのか迷いますよね。
本記事はそんな悩みを持っている方に向けて書きました。
（marginとpaddingの違いを確認することが、本記事の目的であるため、具体的なコードの記述方法については詳しく触れていません）
目的
marginとpaddingの違いを明確にする
比喩表現でmarginとpaddingの理解度をあげる
ボックスモデルとは
marginとpaddingを理解する前に前提知識としてボックスモデルについて触れていきます。
ボックスは下記の図のような「content」、内側の余白の「padding」、contentに枠をつける「border」、外側の余白である「padding」から構成されています。
CSSを当てることで個別に高さや幅、色などを指定できます。
paddingとは
内側の余白のことを指します。上下左右の余白はpxで指定が可能です。
順番は時計回りになります。
padding: 1px
上下左右に内側の余白を1px指定
padding: 1px 2px
上下に1px 左右に2px内側の余白を指定
padding: 1px 2px 2px
上に1px 左右に2px 下に3px内側の余白を指定
padding: 1px 2px 3px 4px
上に1px 右に2px 下に3px 左に4px内側の余白を指定
borderとは
要素の境界線（枠）の幅や色を指定できる
boder: 太さ 線の種類 色; と記述することで境界線の指定ができます。
記述例 線が3px 線の種類が１本線 線の色が青
border: 3px solid blue;
marginとは
外側の余白のことを指します。上下左右の余白はpxで指定が可能です。
順番は時計回りになります。
margin: 1px
上下左右に外側の余白を1px指定
margin: 1px 2px
上下に1px 左右に2px外側の余白を指定
margin: 1px 2px 2px
上に1px 左右に2px 下に3px外側の余白を指定
margin: 1px 2px 3px 4px
上に1px 右に2px 下に3px 左に4px外側の余白を指定
margin: auto
余白を自動で算出
比喩表現でmarginとpaddingの違いを理解しよう
私がmarginとpaddingの違いを落とし込むことができた比喩表現は
バリアーです。
バリアーだけでは？？となると思いますので、ボックスモデルをもとに比喩表現を記述します。
content = 本体
padding = バリアーの内側の領域
border = バリアー
margin = バリアーの外側の領域
考え方として
本体(content)に対して、バリアー(border)内の領域を広げたい場合は、バリアーの内側であるpaddingを指定。
他の本体(content)との距離を取りたい場合は、バリアーの外側の領域であるmarginを指定する。
図でpaddingとmarginの違いを確認してみよう
上記を踏まえて図をみて確認してみましょう。
paddingで余白をとる場合
.content-blue{
padding-bottom: 50px;
}
本体(content)に対して、バリアー(border)内の領域を広げたい為にpaddingを指定して、内側の余白をつくります。
marginで余白をとる場合
.content-blue{
margin-bottom: 50px;
}
他の本体(content)との距離を取りたい為、バリアーの外側の領域であるmarginを指定して外側の余白をつくります。
上記のようにバリアー（border)を起点として、内側か外側かを考えるとCSSをスタイリングする時に迷いが減ると思います。
おわりに
以上で比喩表現でのpaddingとmarginの違いについての説明は終わりになります。
少しでも本記事がお役に立てると幸いです。
↧