In its default state, a block-level element cannot have other elements at its sides. To accomplish this, the user agent generates breaks before and after the element box. An inline-level by definition can have other elements at its sides.
b is an example of an inline element. A content value of One<b>Two</b>Three renders as:
OneTwoThree
p is an example of a block element. A content value of One<p>Two</p>Three renders as:
div is another example of a block element. A content value of One<div>Two</div>Three renders as:
However, the default behavior of both block-level and inline-level elements can be overridden by means of the display property, such that, given the style
.inline
{
display:inline;
}
a content value of One<div class=inline>Two</div>Three renders as:
And given the same style, a content value of One<b class=block>Two</b>Three renders as:
The ability to render the div inline is extraordinarily significant, as it elevates div to the role of default element in an infinite number of layout scenarios.
