CSS填充覆盖​​溢出？ [英] CSS padding overrides overflow?

问题描述

这里发生了什么？

#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.

当然， overflow：hidden 意味着我应该看到一个颜色块？
在FF和IE中发生

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

推荐答案

在默认的 content-box 框模型上显示：块元素， padding 和 height 添加在一起以确定元素的总高度。 overflow 只影响框外部的东西（在height + padding + border之外）。

In the default content-box box model on a display: block element, padding and height are added together to determine the total height of the element. overflow only affects things outside the box (outside of height + padding + border).

从指定的高度减去填充，而不是添加，使用 box-sizing：border-box 。

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

这篇关于CSS填充覆盖​​溢出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！