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

It is by design as overflow: hidden uses the border as its clip so contents will flow into the padding.

You can use a box-shadow here that is the same color as your background to generate some fake padding that the text won't flow into.

box-shadow: 0px 0px 0px 5px black;

You'll have to adjust margins and padding to account for this but its the most painless solution I've found so far.