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

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?

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

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

The <div> isn't meant to change size in this case. As <span> is an inline element.

If that is the functionality you are looking for amend

div, span {
    border: 1px solid gray;
}

with overflow:auto;

 div, span {
     border: 1px solid gray;
     overflow:auto;
}