ホームページ制作MATSUTE BLOG

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

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

1．marginとpaddingの基本

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

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

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

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

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

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

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

2．marginの相殺

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

あれ、120pxのはずが、なんか足りない

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

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

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

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

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

あ、120pxの余白になってる！

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

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

::before {
content: "";
display: block;
margin-top: 60px;
}