CSS

heightを使うとmargin-bottomが効かなくなる

margin-bottomが機能しないとき大体は親要素のheigh指定していることが多く、親要素のheightを削除するかheight: auto;で解決できる可能性があるのでその方法について解説したいと思います。

もしheightを調整しても修正できない場合ほかのプロパティが影響を与えていると思います。

ほかのプロパティの影響がなければ、だいたいはheightをpxやvhで設定したりしているとmargin-bottomが効かない現象が起きます。基本的にブロック要素は可変するのでheightを数値で指定するとコンテンツ量によってははみ出したりするので極力使わないほうがいいかと思います。可変しないのであれば問題ないですが。

サンプルコード

こちらはmargin-bottomがうまく効いているコードになります。

<!doctype html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>テスト</title>
		<link rel="stylesheet" href="./style.css">
	</head>
	<body>
		<div class="parent_box">
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>
			<p>sample text.</p>

			<div class="child_box">
				<p>sample text.</p>
			</div>
			<div class="child_box">
				<p>sample text.</p>
			</div>
			<div class="child_box">
				<p>sample text.</p>
			</div>
		</div>
	<script src="script.js"></script>
	</body>
</html>
*{
    padding:0px;
    margin:0px;
    box-sizing:border-box;
}
html, body{
    width:100%;
    /* height: 100vh; */
}
.parent_box{
    margin:auto;
    width: 700px;
    margin-top:50px;
    padding-bottom: 100px;
    margin-bottom:50px;
    background: ghostwhite;
}
.child_box{
    height: 390px;
    background-color:brown;
    margin-bottom: 10px;
}

失敗例

例えばhtml, bodyにheightを指定してしまうと.parent_boxのmargin-bottomは効きません。親要素（html/body）のheightが影響を与えています。

html{
    width:100%;
    height:100vh;
}
body{
    height: 100vh;
}
.parent_box{
    margin:auto;
    width: 700px;
    height: auto;
    margin-top:50px;
    padding-bottom: 100px;
    margin-bottom:50px;
    background: ghostwhite;
}

基本的に親要素のheightを修正すると答えが見えてくるのではないかと思います。