回答編集履歴
2
説明追記
test
CHANGED
|
@@ -13,3 +13,9 @@
|
|
|
13
13
|
> **親要素と先頭・末尾の子要素**
|
|
14
14
|
|
|
15
15
|
> ブロックが、その margin-top とその先頭の子要素の margin-top を分けられるような、ボーダー、パディング、インラインコンテンツ、フロートの解除 (clear) のいずれも持たない場合、もしくは、ブロックがその margin-bottom とその末尾の子要素の margin-bottom を分けられるような、ボーダー、パディング、インラインコンテンツ、高さ (height)、高さの最小値 (min-height) のいずれも持たない場合、マージンは相殺されます。相殺されたマージンは最終的に、親要素の外側に出ます。
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
解決法としては、相殺を考慮したmarginを設定するか、
|
|
20
|
+
|
|
21
|
+
「ボーダー、パディング、インラインコンテンツ、フロートの解除 (clear) のいずれも持たない場合」とあるので、例えば `padding: 1px;` を追加すれば相殺は発生しないですね。
|
1
説明追記
test
CHANGED
|
@@ -3,3 +3,13 @@
|
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
[マージンの相殺 - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
上記の下記の項目に該当します。
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
> **親要素と先頭・末尾の子要素**
|
|
14
|
+
|
|
15
|
+
> ブロックが、その margin-top とその先頭の子要素の margin-top を分けられるような、ボーダー、パディング、インラインコンテンツ、フロートの解除 (clear) のいずれも持たない場合、もしくは、ブロックがその margin-bottom とその末尾の子要素の margin-bottom を分けられるような、ボーダー、パディング、インラインコンテンツ、高さ (height)、高さの最小値 (min-height) のいずれも持たない場合、マージンは相殺されます。相殺されたマージンは最終的に、親要素の外側に出ます。
|