【HTML入門】余白の取り方(paddingとmargin)について | プロスタ

HTML言語では、上下左右に余白を取ろうと思ったときに「padding」「margin」を用います。 どちらを使用しても、見た目上では同じように余白が取れているように見える場合があるので、どちらがどのような余白を意味するのか正確に理解していない人もいるのではないでしょうか。 paddingとは paddingは、内側（要素内）の余白のことを表しています。 文字だけで書いてもイマイチピンと来ない人もいるので、図を用いて説明しましょう。 上図で示している「Content」の部分は、divタグ、pタグ、imgタグといったような要素の事です。 Contentに対して装飾（背景色を付けたり線で囲う等々)をすることが出来ますが、 この線（border）の内側の余白部分を「padding」で設定することが出来ます。 Contentにpaddingを設定するとその分領域が広がるので、Contentに背景色

[hrt305]

“marginを使うにあたって知っておかないといけないのが「marginは縦方向で重なるmarginを相殺する性質がある」ということです。 横方向は相殺しません。また、paddingはこの性質はありません。”

[kabacsharp]

基礎は大事。。。