h1などのmargin部分だけ背景が消える時のメモ

h1などのmargin部分の背景だけが抜けてしまうのは悲しい。でもバグではない。

float や position がデフォルトのボックスに関して、
上マージンが指定されている要素の先祖要素が、ボーダーかパディングを正値で持っていない場合、上マージンはその要素ではなく、先祖要素の上マージンとして振る舞われます。
理想を実現するには、その要素に対する上マージンではなく、その要素の先祖要素に対して上パディングを与えるか、間にボーダーかパディングを挟む必要があります。(引用元

とあり、頭が混乱。ちなみに、引用元はfloatしたときに子ボックスが親ボックスから下方向に飛び出る話。

nukeru.pngでも、自分が苦しんでいるのは、右の例のように子ボックスの上にできる背景が抜けちゃった空間。

h1の上マージン部分の分だけ、floatボックスも落ちるので、floatでサイドメニューを出すようなレイアウトの時にひっかかる。

解決方法は、floatしているボックスの親にあたるボックスに正の数でpaddingが設定されていればいい。でも0にしたい。

ということで、試しにpadding-top: 0.01pxを入れたら成功。
限りなく0に近いけど、0ではだめだし、0.001pxもだめだった。

これまで、h1のmarginを消して、かわりにボックスにpaddingを設定して、負け犬のごとく回避していたけど、こんな方法もあったことにようやく気がついて、幸せを感じたので、メモをしてみた。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA