HTML and CSS Reference
In-Depth Information
Figure1-2.Box model details
Inline Layout
An inline-level box in CSS generates one or more rectangular boxes called inlineboxes, de-
pending on whether the inline box is broken across multiple lines. The following rules apply
to inline box:
▪ For the properties
left
,
right
,
top
,
bottom
,
margin-left
,
margin-right
,
margin-top
,
and
margin-bottom
, any value of
auto
is converted to
0
(zero).
▪
width
and
height
do not apply to nonreplaced inline boxes.
▪ For replaced inline boxes, the following rules apply:
— If
height
and
width
are both
auto
and the element has an intrinsic width (e.g., an im-
age), that value of
width
is equal to the element's intrinsic width. The same holds true for
height
.
— If
height
and
width
are both
auto
and the element does not have an intrinsic width but
does have an intrinsic height and layout ratio, then
width
is set to be the intrinsic height
times the ratio.
— If
height
and
width
are both
auto
and the element does not have an intrinsic height
but does have an intrinsic width and layout ratio, then
height
is set to be the intrinsic
width divided by the ratio.
There are a few rules even more obscure than those last two, which are too lengthy to include
here; see
http://w3.org/TR/css3-box/#inline-replaced
for details.
