Mac IE <div>の中に入れた<p>のmargin-bottomが<div>に反映されてしまうバグ | WEB制作の覚書タイトル長いですが… <div>の中に<p>を入れ子にして、<p>にmargin-bottomを指定すると、なぜか<div>のほうにもmargin-bottomの値が反映されてしまう、というバグです。 見かけ上は、へんなすきまが空いてしまうので、前後のBOXの設定を見比べたり、HTMLのほうで改行が入っていないかなどをチェックしてしまったのですが、原因がBOXの入れ子にした要素にあったとは… このバグを検索するのに時間がかかってしまいましたが、 「margin-bottom の逆継承」というらしいです。 ↑このサイトのページの下のほうに詳しく出ています。 解決方法は、 <div>の中に<p>を入れ子にした時は、Pのmargin-bottomは0にする。 どうしてもmargin-bottomをとる必要があったら、<p>はあきらめて、<div>の中に<div>で入れ子にする…・・って感じでしょ
