CSS: Is it correct that text content of a div overflows into the padding?

Question

I expected that the padding inside a div would remain clear of any text. But given the following html/css, the content-text spills out into the padding;

Answer 1

This is the correct behavior. overflow: hidden will clip content that extends outside the box. Padding is inside the box, so content will happily overflow into that space if necessary.

(source)

To get the effect you seem to be aiming for, one solution is wrap your div.foo in an another div and set the background on that one instead, like this:

    
purrrrrrrrr


.foo {
    overflow: hidden;
    width: 40px;
}
.foowrapper {
    padding-right: 10px
    background: red;
    border: 1px solid green;
}