Search code examples
cssoverflowpadding

CSS padding overrides overflow?

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.

Surely the overflow:hidden means I should just see a block of colour?

Occurs in FF and IE.

Solution

  • 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).

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