HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

基礎32. 上下のmarginの注意点

      2017/07/11   hatano

インラインの要素の上下のmargin

ブロックレベル(display: block;)の要素は、すべての方向のmarginが使えますが、インライン(display: inline;)の要素は、上下のmarginが無視されます。

上下のmarginの相殺

上下に隣接する要素のmarginは相殺されます。小さい値の方が打ち消しになり大きい値の方が有効になります。左右で隣接する要素のmarginは相殺されず合算されます。

上下のmarginの相殺

左右のmargin

親要素内の子要素の上下のmargin

親要素内の最初の子要素のmargin-topは親要素のmargin-topになります。
親要素にもmargin-topが指定してある場合は相殺され値が小さいほうが打ち消しになります。

親要素内の最後の子要素のmargin-bottomは親要素のmargin-bottomになります。
親要素にもmargin-bottomが指定してある場合は相殺され値が小さいほうが打ち消しになります。

子要素の上下のmarginの場合

ただし以下のいずれかの条件下では親要素のmarginになりません。

親要素にpaddingまたはborderがある子要素の上下のmargin

まとめ

  • インライン要素には上下のmarginが使えない
  • 隣接する要素の上下のmarginは相殺される
  • 親要素内の最初と最後のmargin-topとmargin-bottomは親要素のmargin-topとmargin-bottomで相殺される
  • ただし親要素に上下のpaddingまたは上下のborderがある場合は相殺されない。

広告

 - HTML・CSS