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

Another approach is to use an outline-right as a pseudo-padding. First reduce the width of your element by 10px (to account for the extra amount the outline will extend forth). Then add a 10px solid red outline-right to your element. The outline will cover any 'hidden' text.

If there are any elements that appear to the right of foo, be sure to add 10px to its right margin (because the outline will not push them aside like a normal width extension would).

.foo {
  float: left;
  overflow: hidden;
  background: red;
  padding-right: 10px;
  width: 40px;
  border: 1px solid green;
  outline-right: 10px solid red;
  margin-right: 10px;

}