HTML&CSS

CSS:marginとpaddingの使い分け

marginとpaddinの使いわけ

基本情報(marginとpddingの違い)

margin

①枠線の外側の余白
②marginには背景色や背景画像が表示されない
③margin同士が重なり合ったとき、相殺される
 (例:上の要素のmargin-bottomに40px、下の要素のmargin-topに20pxを設定し
      2つの要素が重なりあったとき、marginは、大きい方の40pxとなり、
      相殺される。)
④marginは親要素を超えてはみ出す場合がある
 (例:divタグ内にh2要素があり、h2とdivタグの間に余白を設定したいとき、
    margin-topを設定するとmarginがdivタグを突き抜けて、
    親要素の外側に余白ができる。 ※ただし、divタグにborderを設定すると、
    h2とdivの間に余白ができる。)

padding

①枠線の内側の余白
②paddingには背景色や背景画像が表示される
③padding同士が重なりあっても、相殺されない
 (例:上の要素がpadding-bottom40px、下の要素のpadding-topに20pxを設定し、
    2つの要素が重なったとき、paddingは、40+20=60pxとなり、相殺されない。)

marginとpaddingの使い分け

①余白に背景色や背景画像を表示させたい→padding
②隣り合う要素(HTML)同士の余白を空けたい→margin
③文字とborderの間を空けたい→padding
④親要素と子要素の余白を空けたい→padding
 mariginが親要素を超えてはみ出す場合がるため。
 (例:div要素とdivの中にあるh2タグの間に余白を作りたいときはpaddingを使用。)
⑤marginを使用する際、上下に関しては、margin-topかmargin-bottomのどちらかに
統一する。margin同士が重なったとき、余白が相殺され、レイアウトが崩れるのを防ぐため。

コメントを残す

メールアドレスが公開されることはありません。