子要素で使うmargin-topの罠

度々苦しめられてきた割に、度々忘れる事実なのですが……

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

しばらくこの画像は多用させていただきます

例えば、こういう構成でページを作る場合
ついこんなコーディングをしてしまうのですが

<p>ここに前書きがあって</p>
<ul>
<li>ピンク背景+写真で構成された画像ファイルをボックス内のback-groundで指定するとします。</li>
</ul>
ul {
	background: url(画像.jpg) no-repeat;
	width: 横幅;
	height: 縦幅;
	margin-top: 10px;
}
ul li {
	margin-top: 170px;
}

実際に仕上がるイメージは、こうです。

なんで!?って絶叫するけど実際は何の不思議もない現象

上に空白が欲しいのはテキストだけなのに
何故かボックス全体の上に空白ができてしまいます。

この場合、ulの上に10px、liの上に170px指定しているので
重ね合わせ処理が行われ、上マージンはより多い数値である170pxになるのです。
回避方法としては

・親要素に float を指定する
・親要素に position:avblolute を指定する
・親要素に border もしくは padding を設定する

私の場合は、ul li から div に変更し
padding-top を設定していたのですが
float とか padding の方が早そうですね。

<参考サイト様>
【CSS】親要素と子要素の上下マージン

【ハートブレーン】https://heartbrain.net

メールでのお問合せ・お見積りはコチラ