CSS padding overrides overflow?

Question

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

Answer 1

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.

Answer 2

Like this

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

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

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