margin-topが効かない件
margin-topが効かなかった。
どうも「マージンの相殺」が起こっているらしい。
マージンの相殺が起こる原因はいろいろあるが、自分のケースは、margin-topを使った<div>を含む親要素に float: left; が使われていたため。
floatを解除しないとmarginが有効にならないようだ。
解決方法として「clearfix」なるものがあるらしい。
ただ、私には理解できなかったため、とりあえずその場しのぎで次の方法でfloatを解除し、事なきを得た。
有効にならないmargin-topの<div>の前に
<div>テキスト</div>
を記述。
スタイルシートには、
.clear {
clear: both;
}
と記述。
ようは普通にfloatを解除しただけ。
いずれclearfixを使わなければいけないだろうが、そのときまでこれでいこう。
カテゴリー：css