隐藏的溢出似乎向段落元素添加了填充

Question

我不知道是什么原因造成的。正如您在 here (JSFiddle) 中看到的，当我添加 overflow:hidden（或 display:inline-block 或 float:left）时，它似乎为向下移动的段落添加了顶部和底部填充。谁能解释一下这是什么原因造成的？

.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;
}

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

Answer 1

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

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

p { margin:0px; }

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

更多信息Google：CSS重置

Answer 2

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

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

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

如果没有 overflow: hidden 属性，p 元素的边距会折叠与父块的 55% 边距。

有关块格式化上下文的详细信息，请参阅 CSS2 规范：

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

隐藏的溢出似乎向段落元素添加了填充

Overflow hidden seems to add padding to paragraph element

css

overflow