html にて子要素の上下の margin が親要素をはみ出すのを防ぐ

最終更新日:

子要素の margin-top と margin-bottom が親要素を通り越して、
意図しない見た目になる時がある。

下記親要素と子要素を用意して上記現象を引き起こすサンプルコード。

/* 親要素 */
section {
	background: #666;
	min-height: 100vh;
}

/* 子要素 */
div {
	background: #eee;
	min-height: 100vh;
	margin: 100px;
}

<section>
	<div>contents</div>
</section>

css で防ぐ

  • height や max-height と併用すると、はみ出た子要素は隠れる
/* 親要素 */
section {
	overflow: hidden;
}
  • 0.1 以上であれば適用される (Chrome 最新で確認)
/* 親要素 */
section {
	border: 0.1px solid transparent;
}
  • 0.1 以上であれば適用される (Chrome 最新で確認)
/* 親要素 */
section {
	padding: 0.1px;
}

html で防ぐ

  • 上下 margin がはみ出るところにテキストを追加する
<section>
	text
	<div>contents</div>
	<span>text</span>
</section>
  • 上記 css で防げる overflow, border, padding を適用させたタグをはみ出るところに追加する。
  • overflow を使う時はブロック要素のタグに使用する。
span {
	display: block;
	/* 下記どれか */
	overflow: hidden;
	border: 0.1px solid transparent;
	padding: 0.1px;
}

<section>
	<span></span>
	<div>contents</div>
	<span></span>
</section>