Code:
<div class="cont"><span class="inn">inline content</span></div>
Code:
.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?