css - 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

像这样

演示

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。