The box model - why does not the yellow box stay inside? - html

Question

I have two rows:
<div>
The first row
</div>
<div>
The <span class="boxed">second</span> row
</div>
The word "second" is in a yellow box with padding:
* { box-sizing: border-box; }
div { border: 1px solid black; }
.boxed {
background: yellow;
padding: 0.5em;
}
As you can see I am using the border-box model. But the yellow box does not. Or does it?
I expected the second row to be as high as the yellow box, but that did not happen. There is no float, no CSS position, but still the yellow box overflows the div. How can I make the second div row contain the yellow box inside of it?
There is a fiddle here: http://jsfiddle.net/lborgman/9xEgA/

Answer 1

Inline boxes are not affected by box-sizing since they are never affected by the width and height properties. When you add padding to inline boxes, all that does is cause their backgrounds to expand, pushing only their left and right edges away from surrounding content, but not their top and bottom edges (since the line height is not altered). That's why it overflows. See sections 10.6.1 and 10.8 of the spec for more details.
If you want to hide the overflow, use overflow: hidden:
div { border: 1px solid black; overflow: hidden; }
Otherwise, if you want to make the second row expand to contain the yellow box, you might be able to make the yellow box display: inline-block without any adverse side-effects:
.boxed {
display: inline-block;
background: yellow;
padding: 0.5em;
}

Answer 2

Try adding display: block to the span. Inline block elements sometimes alter the document flow in strange ways when you do things like add padding to them. See this updated fiddle

Answer 3

You can use display: inline-block property for your .boxed span.
.boxed {
background: yellow;
display: inline-block;
padding: 0.5em;
}
JSFiddle