space below inline elements inside a block element

[anishmsry]

<div class="cont"><span class="inn">inline content</span></div>

.cont{
	border: 2px solid #F00;
}
.inn{
	background-color: #999;
}

Inline elements are placed inside a block element.
Inline element is given a background color & block element is given a border.

There's a space of about 1px at the bottom of inline element. Why is this so?

When inline element is given display:inline-block or display:block the space disappears.

I thought this was the standards mode - almost standards mode stuff.

But this space is present in Almost Standards mode & Quirks mode also.
This space is not present in IE6.
1.jpg
What's the reason for this space at bottom?

[sdleihssirhc]

My understanding is that this is related to the vertical-align property. The space also disappears if you set vertical-align to "bottom".

The default vertical-align for inline elements is baseline, which is (I guess) not quite bottom...

[dresden_phoenix]

This is because of the inline formatting model. Line-height and/or vertical align can be a lot of help in this situation.

[anishmsry]

I also thought that this was related to vertical-align of inline elements.

But no, the space is still present with vertical-align:bottom.

The background-color of the inline element covers the descender space of characters like j, p, q etc.
The space is below the characters.

I'll update the code & attachment with these characters

Update
Couldn't edit the question. Code with descender characters & vertical-align: bottom:

<div class="cont"><span class="inn">inline content y p q</span></div>

.cont{
	border: 2px solid #F00;
}
.inn{
	background-color: #999; vertical-align: bottom;
}

[anishmsry]

The space is still present when using line-height.

As the line-height is increased for the inline-element, space is appearing at both top & bottom.

.inn{
	background-color: #999; line-height: 40px;
}

[ralph.m]

There is a default line-height on the body element, so perhaps if you remove that (or reset it to 1) you'll remove the gaps:

body {font: 100%/2 arial, sans-serif;}

[anishmsry]

thanks all,

Setting line-height: 1; on the parent block element removed the space.

There was a small side-effect. The background of inner inline element overlapped the border of outer block element.
Applying top & bottom padding on the outer block element fixed this.

[Paul O'B]

Hi,

You should read the details of the inline formatting model as it is a very complicated subject. I;ve read it a 100 times and it still confuses me

Your main mistake is thinking that the background and/or vertical alignment of the inline element will have any effect of the block level parent that surrounds it. Backgrounds on inline elements cover the "content area" of an inline element (which is not the same as the content area of a block box) and does not equate to the full space that the inline element takes up. Also vertical padding on inline elements will increase the height of the inline element but have no effect to the surrounding area except maybe to bleed over other lines and vertical margins are completely ignored.

It is possible in a lot of cases to achieve the effect you want by controlling line-height and font-size (and padding on parents if borders are used on the parent) to control specific instances to produce the effect you want but that effect may be lost should a user resize the text or should you use an odd pixel size.

Suffice to say that backgrounds on inline elements are only useful for highlighting odd words in a sentence and not for creating block level button effects where height is critical.

If you want perfect control then make the inline element a block element or float it.

[anishmsry]

thanks Paul

Backgrounds on inline elements cover the "content area" of an inline element (which is not the same as the content area of a block box) and does not equate to the full space that the inline element takes up.

this is a very good point.

details of the inline formatting model - i didn't even reach half the article & my head was spinning.