Edited at

【CSS】親要素と子要素の上下マージン

More than 5 years have passed since last update.

上下マージンの重ね合わせは、親要素と子要素の間でも行われます。

例えば、 h2pdiv でマークアップします。親要素である div の上下に 30px のマージンを設定しますが、上マージンは子要素 h2 の上マージンと、下マージンは子要素 p の下マージンと重ね合わせが行われます。

div {

margin: 30px, 0, 30px, 0;
background: #F9A1D0;
}

h1 {
margin: 40px, 0, 40px, 0;
padding: 10px;
border: 1px solid #FFFFFF;
}

p {
margin: 20px, 0, 20px, 0;
padding: 10px;
border: 1px solid #FFFFFF;
}

その結果、 div が構成するボックスの上下マージンは 40px (h2 の上マージン)30px (div 自身の下マージン) になります。


親要素と子要素でも、 float プロパティで配置を指定したり、 position プロパティで absolute を指定した場合には、重ね合わせが行われません。 30px になります。

div {

margin: 30px, 0, 30px, 0;
background: #F9A1D0;
float: left;
}

h1 {
margin: 40px, 0, 40px, 0;
padding: 10px;
}

p {
margin: 20px, 0, 20px, 0;
padding: 10px;
}


また、親要素にボーダーやパディングを設定した場合にも、重ね合わせは行われなくなります。

div {

margin: 30px, 0, 30px, 0;
padding: 2px;
background: #F9A1D0;
float: left;
}

h1 {
margin: 40px, 0, 40px, 0;
padding: 10px;
}

p {
margin: 20px, 0, 20px, 0;
padding: 10px;
}