HTML and CSS Reference
In-Depth Information
Other text properties also affect
inline-block
elements—baseline align-
ment sometimes causes unexpected spaces to appear between rows of
elements.
Inline-block
good
Inline-block
bad
Many of the same
benefits as
float
s
,
but without the
clearing issues.
More control over
how the layout breaks.
Issues with
letter spacing.
Baseline
alignment can
trick you.
Grouping element dimensions with display: table
One question you might well ask yourself: if browsers use
CSS
for their
layout, what
CSS
do they use to lay out tables? The simple answer is
that there's a special
CSS
display mode for
table
, as well as display
modes for
table-row
and
table-cell
. All of these display modes can be
applied to nontabular elements.
Here's a simple layout created with
display:
table
. The following markup
is taken from ch08/layout-table-1.html. It's based on the listing in ch08/
layout-table-1-actualtable.html, which implements the same layout
using an
HTML
table. If you've never done a layout with a table before,
please check out that listing because there's no room to show it here:
<header>
<h1>Heading</h1>
<figure>
<img src="dust-puppy.svg">
</figure>
</header>
<div>
<section>
<p>I never am ...</p>
</section>
<aside>Side bar</aside>
</div>
<footer>
<nav>
<a href="/l1">Link 1</a>
<a href="/l2">Link 2</a>
</nav>
<small>Footer credits</small>
</footer>
