1. このページの目的
CSS における margin の相殺を試す。
2. 仕様
3. デモ
(1) 親ボックスに border, padding なし
- この場合、親ボックスの
marginと子ボックスのmarginは相殺される（上下方向のみ）。- そのため、
<p>タグの上下のマージンは表示されていない（白色の部分がない）。
- そのため、
- 左右方向は相殺が行われない。
- そのため、
<p>タグの左右のマージンが表示されている（白色の部分）。
- そのため、
Foo
HTML
<div class="box1">
<p class="box12">Foo</p>
</div>
CSS
.box1 {
width: 300px;
margin: 1em;
background-color: white;
}
.box12 {
margin: 1em;
background-color: #adffb6;
}
(2) 親ボックスに border, padding あり
- 親ボックスに
borderもしくはpaddingがあると、親ボックスのmarginと子ボックスのmarginは相殺されない。 - 白い部分は、親ボックスの
paddingと子ボックスのmarginの2つ分になっている。
Foo
HTML
<div class="box2">
<p class="box22">Foo</p>
</div>
CSS
.box2 {
width: 300px;
margin: 1em;
padding: 1em; /* 追加 */
border: 1em solid #4600dd; /* 追加 */
background-color: white;
}
.box22 {
margin: 1em;
background-color: #adffb6;
}
(3) ここで取り上げていない margin 相殺の特徴
- フロートした要素のマージンは相殺されない。
display: inline-blockの要素にはマージン相殺が起こらない。position: absoluteで絶対配置された要素のマージンは、他のどの要素のマージンとも相殺しない。