HTML and CSS Reference
In-Depth Information
span {
display: block;
}
Thebehaviorofblock-levelcomparedtothatofinline-levelelementsisn'ttootrickytograsp,
and that understanding can be a rewarding “aha!” moment for many beginner CSS deve-
lopers, so it's good to learn this concept early.
Figure 2.2
visually demonstrates the difference
between block and inline.
Figure 2.2. A visual demonstration of the difference between block and inline
Block elements have certain characteristics. First, unless given a specific width, they always
expand horizontally to fit inside their parent container and will also, by default, expand ver-
tically to hold their contents. So there is normally no need to, say, add a specific width to a
block element unless you require its width to be smaller than the available space within its
parent element. And there's rarely a need to give an explicit height to a block element since,
in most cases, it will naturally expand to hold its contents.
