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

  • 27
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

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

症状

※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設定しておけば良いってことなんでしょうね。