CSS CSS填充覆盖​​溢出？

CSS padding overrides overflow?

提问by Datadimension

Whats happening here ?

这里发生了什么事 ？

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

The top padding is ridiculously high just to demonstrate - with a realistic requirement the div still increases height proportionally.

只是为了演示，顶部填充高得离谱 - 在现实要求下，div 仍然按比例增加高度。

Surely the overflow:hiddenmeans I should just see a block of colour ? Occurs in FF and IE

当然overflow:hidden意味着我应该只看到一块颜色？出现在FF和IE

回答by Ennui

In the default content-boxbox model on a display: blockelement, paddingand heightare added together to determine the total height of the element. overflowonly affects things outside the box (outside of height + padding + border).

在默认的content-box盒子模型上有一个display: block元素，padding并被height加在一起来确定元素的总高度。 overflow只影响框外的东西（高度+填充+边框之外）。

If you want border and padding subtracted from specified height rather than added, use box-sizing: border-box.

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

回答by Falguni Panchal

Like this

像这样

demo

演示

css

css

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

回答by Ashis Kumar

You have set the height to 3em, so it will show the final height of ( 3em + 20em ).

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

And overflow will restrict only for height i.e 3em.

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