HTML and CSS Reference
In-Depth Information
<div>
<p style="margin: 0 0 0
auto
;">margin: 0 0 0 auto;</p>
</div>
Take a container
<div>
that is 500 pixels wide, as shown in
Figure 5.5
. If
a 300-pixel wide
<p>
is inside that container, then you have 200 pixels of
room to spare. If both margins on the
<p>
are 0, then the paragraph will
be flush left. However, the definition of an auto margin value is that it
will fill the container. A right margin of auto and left of 0 will not particu-
larly change anything in the layout (the empty space is still on the right),
but having both right and left margins set to
auto
will cause the space to
be split between the two margins, and the
<p>
will appear centered just
as if you had done the calculations yourself and set the margins to 100
pixels each.
Figure 5.5
Auto margin
examples.
In some Quirks Mode scenarios or if set via the
box-sizing
property
introduced in CSS3, an element's padding and border are drawn
inside
the width and height, taking space away from the content area.
The box model used when calculating and placing borders and padding
areas can be set using the
box-sizing
property.
■
content-box
: The width and height dimensions refer to the content
area with padding and borders drawn outside (default).
