CSS填充覆盖​​溢出？

Question

这里发生了什么？

#agendaTitle{
    margin:0;
    padding:20em 0em 0em 0.75em;
    height:3em;
    overflow:hidden;
    background-color:#ff00ff;
}

顶部衬垫非常高，只是为了展示 - 在实际要求下，div仍会按比例增加高度。

overflow:hidden肯定意味着我应该看到一块颜色？ 在FF和IE中发生

Answer 1

在content-box元素的默认display: block框模型中，padding和height会一起添加，以确定元素的总高度。 overflow仅影响框外的内容（高度+填充+边框之外）。

如果您希望从指定的高度减去边框和填充而不是添加，请使用box-sizing: border-box。

Answer 2

喜欢这个

<强> demo

<强> CSS

*{
    margin:0;
    padding:0;
}
#agendaTitle{
    margin:0;
    padding:0.75em 0em 0em 0.75em;
    height:3em;
    overflow:hidden;
    background-color:#ff00ff;
}

Answer 3

您已将高度设置为3em，因此它将显示（3em + 20em）的最终高度。

溢出只会限制高度，即3em。