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
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.
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:
<img src="dust-puppy.svg">
<p>I never am ...</p>
<aside>Side bar</aside>
<a href="/l1">Link 1</a>
<a href="/l2">Link 2</a>
<small>Footer credits</small>
Search WWH ::

Custom Search