Question

使用这个非常简单的html / css（http://jsfiddle.net/XXzTj/）

<div style="background-color:red;">
<div style="margin:12px; background:blue;">hello</div>
</div>

边距正确地间隔12px，但我希望父元素的红色背景显示在顶部和底部的12px空间中，而不仅仅是“空白空间”。

我生气还是做错了什么？

Answer 1

试试这个 -

<div style="background-color:red;height:auto;overflow:hidden;">
<div style="margin:12px; background:blue;">hello</div>
</div>

http://jsfiddle.net/XXzTj/1/

Answer 2

子div正在强制使父div与其周围环境相对，因为您正在使用margin属性。由于父div没有内容，浏览器没有理由在子div之上或之下应用样式。

为了尊重子div的margin属性，具有内容，父div以其背景的任何一面呈现。

要让浏览器以我想象的方式呈现它，您需要应用padding样式。再次，那是因为父div没有内容。填充强制其样式在区域内呈现，因为填充基本上就像内容将填满的空间一样。

Answer 3

collapsing margins正在行动中。对于子元素，可以使用padding代替父元素而不是margin，也可以通过设置position: relative，overflow: auto/scroll/hidden或添加生成的内容（:before来创建新的上下文使用:after父元素的display: block伪元素，以防止边距折叠。

Answer 4

不太确定为什么这样做不诚实，但确实有效：

<div style="background-color:red; padding:12px;">
    <div style="background:blue;">hello</div>
</div>

简单的HTML / CSS框模型混淆

4 个答案: