CSS3 - HTML5 Mastery: Semantics, Standards, and Styling - page 256

shows an example of block-level and inline-level boxes and how they interact with each
other.
___________
8 The positioning properties (left, top, right, bottom) are used in combination with the position
property, which will be discussed later.
Figure 6-12. Block-level and Inline-level boxes. Note that an inline-level box that extends across
two lines will wrap around by default.
In Figure 6-12 , there is a border drawn around the entire content and the first para-
graph (both block-level boxes), and borders are drawn around a single word and several
words. An element that has a block-level box can be referred to as a block-level element.
The words are contained in inline-level boxes and have 10 pixels (px) of padding ap-
plied. As you can see, although the box border has expanded 10px in all directions away
from the text, the top and bottom padding does not affect any surrounding elements, and
the borders overlap with other content on the page. If you're curious, the following is the
HTML to produce the previous:
<div class="box">
<p class="box">
This is the first paragraph in this page of content, it
has a border drawn around it to
show that it is a block-level element.
</p>
<p>
This is a second paragraph, it is a block-level element
as well, but does not have a
bordered style added. Instead, some of the <span
class="box">inline-level</span> boxes are
shown with borders added. <span class="box">Inline-