よく使うのになぜか失敗するmarginとpadding

ホームページを作り始めた頃につまずきやすいのがmarginとpaddingの設定。

あれ、なんか思うような余白にならない

そんなこと、ありませんか?
一度、覚えてしまえば難しくないので基本を押さてステップアップしましょう。

この記事は「2020年12月23日」に書かれた記事です

  1. marginとpaddingの基本
  2. marginの相殺
  3. 今だからできる、要素の内側にmargin設定

1.marginとpaddingの基本

marginとpaddingは要素の周囲(上下左右)に余白を作るという意味では同じです。
実際に枠組みがあった方がわかりやすいので、横幅200px、縦幅 120pxの四角い枠組みを作ってみます。

要素:200 x 120px
padding:10px;
margin: 20px;

  • 四方を緑の線で囲っています、ここがborderと呼ばれる要素の境界線になります。
  • このborderの外側に設定する余白がmargin。上記の図のグレーの背景色がついている部分に20pxの余白ができています。
  • 内側に設定する余白がpaddingです。黄色の背景色が付いている部分です。
  • テキストを書いている要素の枠が、緑の枠よりも10px 程内側に表示されているのが確認できます。

borderは初期値では要素にサイズには含まれません。

上記の場合、borderに1pxの線が設定されているので、202 × 122pxになります。
しかしサイズに要素を含めないと、線の太さ分、要素から差し引かなければならなくなるため、わかりにくいです。そのためborder-boxを設定し、要素がborderを含めた数値になるようにしてあります。

各ブラウザのリセットCSS(「4-1 ブラウザー間の独自の設定を打ち消しておこう」)を使っている場合は(リセットCSSにもよりますが)この設定が入っていることがほとんどかと思います。

ブロック要素とインライン要素での挙動

上記で見てきた設定は、div というブロック要素に設定したので、marginもpaddingもきっちりかかっています。では、インライン要素に設定するとどうなるでしょうか。

marginとpaddingは、インライン要素に対しては左右にしか設定が効きません。
もしインライン要素に対して、margin , paddingを設定したい場合は、「display:block」「display:inline-block」 などで、ブロック要素として扱うように設定します。

使用しているリセットCSSや自分で設定したCSSによっては、きれいにかかります。かからないときはインライン要素? と疑ってみましょう。

2.marginの相殺

paddingと異なり、marginには相殺されるという仕様があります。たとえば、下記のような要素があったとします。2つのボックスの間の余白は

margin-bottom:60px;
margin-top: 60px;
あれ、120pxのはずが、なんか足りない

ということになります。そう、これこそがmarginの相殺です。
marginは上下、左右など、設定が続いている場合、勝手に相殺してしまうのです。厳密には、サイズの大きい方に小さい方が吸収されます

上記の例の場合、60pxに60pxが吸収され、結果として60pxの余白になっています。

マイナスの場合も数字が大きい方が生き残ります。
-10px と-50px であれば、-50pxに -10pxが吸収されるため、結果として-50pxの marginとなります。

3.今だからできる、要素の内側にmargin設定

上下左右であっても何がなんでも、余白をmarginで作り出したいんだ。というときがあるかもしれません。そんなときは、今は疑似要素で対応ができます。2で見てきた図と同じものを使ってみます。

ただし、2つ目のボックスには、疑似要素を設定しています。

margin-bottom:60px;
margin-top: 60px;
あ、120pxの余白になってる!

通常であれば、marginの相殺により、2つのボックスの間の余白は60pxとなりますが、2つ目の枠「margin-top: 60px;」の方ボックスに、疑似要素「::before」でmargin-top:60px;を設定しています。

この方法の場合、一つ目のmargin-bottom:60pxと相殺されることなく、2つのボックスの間に、120px の余白ができました。

::before {
content: "";
display: block;
margin-top: 60px;
}
松江ブログ(M2エムツー)

HOME > ホームページ制作 > CSSでホームページを1UP > よく使うのになぜか失敗するmarginとpadding

ページトップへ