Question

我无法弄清楚造成这种情况的原因。正如您在here (JSFiddle)中看到的那样，当我添加overflow：hidden（或display：inline-block或float：left）时，它似乎会向向下移动的段添加顶部和底部填充。有人可以解释一下造成这种情况的原因吗？

＆＃13;

.container{
    background-color: blue;
    width: 200px;
    height:200px;
    float: left;
    margin: 0.5%;
    overflow: hidden;
}

.problem{
    background-color: rgba(52, 152, 219, 0.8);
    width: 100%;
    height: 15%;
    font-size: 120%;
    color:white;
    margin-top: 55%;
    overflow: hidden;
    vertical-align:bottom;
}

＆＃13;

<div class="container">
    <div class="problem"><p>text</p></div>
</div>

＆＃13;

Answer 1

在您的示例中，您将看到折叠边距和块格式上下文的效果。

将overflow: hidden属性添加到.problem时，该元素会建立一个新的块格式化上下文。

因此，子p元素的默认边距被限制在其中父元素的边缘。

如果没有overflow: hidden属性，则p元素的边距会崩溃与母公司55％的差距。

有关块格式化上下文的更多信息，请参阅：

中的CSS2规范

http://www.w3.org/TR/CSS21/visuren.html#block-formatting

Answer 2

大多数浏览器都会自动包含一些CSS。

添加此项以清除默认的段落边距：

p { margin:0px; }

http://jsfiddle.net/stsrjnxk/16/

有关详情，请参阅Google：CSS重置

溢出隐藏似乎为段落元素添加填充

2 个答案: