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 because you have constrained the width of the div to 50px causing the text to spill into the padding. Remove that width statement and the div will expand and contract with the size of the txt within it.

helloworld

.foo {
  float: left;
  overflow: hidden;
  background: red;
  padding-right: 10px;

  border: 1px solid green;
}

Hope that helps you.