CODEWITHSUNDEEP
htmlcss
Alex Feinman
Alex Feinman

Reputation: 5563

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?

Upvotes: 5

Views: 3196

Answers (3)

scottheckel
scottheckel

Reputation: 9244

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

Upvotes: 7

zellio
zellio

Reputation: 32504

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;
}

Upvotes: 0

Matt Stein
Matt Stein

Reputation: 3053

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

Upvotes: 3

Related Questions