Why does span padding cause the rendering box to overlap its parent?

Question

See this jsfiddle for example: http://jsfiddle.net/FrJRA/1/ and note that the inner span's border overlaps the containing div.

I sort of understand what is happening. But I don't understand why. Why isn't the size of the div increased to allow for the new height of the span?

I know I can use display: inline-block if I want this to happen, but what is the reasoning behind inline failing to increase parent container size?

Answer 1

Inline elements only change their dimensions for padding in the left/right dimensions. It doesn't increase the dimension of the element in the top/bottom directions. That's why you notice it increasing it on the sides but not on the top/bottom.

Update: Found the part of the W3 specification that touches on this.

The vertical padding, border and margin of an inline, non-replaced box start at the top and bottom of the content area, and has nothing to do with the 'line-height'. But only the 'line-height' is used when calculating the height of the line box. CSS 2.1 Spec

Answer 2

Inline elements just aren't meant to affect layout, that's why block or inline-block will but the inline span won't.