Edited at

[CSS] 子要素の上下marginが効かなかったり親要素marginに影響するのは困るので、阻止する。

More than 5 years have passed since last update.

ド素人が子要素の上下マージンでハマりましたので、メモでございます。


症状

※margin-topに言及しますが、margin-bottomも同じだと思います。


hoge.html

<div class="parent">

<div class="chile">
小要素のテキスト
</div>
</div>


fuga.css

.parent {

margin-top: 10px;
}

.child {
margin-top: 50px;
}


とやってしまうと、子要素が親要素のマージンにまで影響を及ぼし、.parentのマージンが50pxになります。

そして、親要素内の子要素のマージンが0みたいになっちゃいます。


解決方法3つ


親要素にpaddingを設定する。

親要素にpaddingを設定すると治ります。

なので、そもそもこんな風に書けばいいんだよ。という方法。


fuga.css

.parent {

margin-top: 10px;
padding-top: 50px;
}

まあ、確かに。


テキストとか挟まってると、大丈夫。


hoge.html

<div class="parent">

 ここらへんに文章あれば大丈夫になります。
<div class="chile">
小要素のテキスト
</div>
</div>

けど、これは本質的解決じゃありませんね。


overflow: hidden を設定する。


fuga.css

.parent {

margin-top: 10px;
overflow: hidden;
}

.child {
margin-top: 50px;
}


こうしておくと、大丈夫みたいです。

親要素から「子要素のはみ出す部分」は表示させないぞ!って意味らしいです。が、まあ、なんか上手くいきます。


素人の感想

結局、親要素のpadding設定しておけば良いってことなんでしょうね。