Figure 11-2 demonstrates that stretching the browser window wider (right)
does not stretch the paragraph wider. The right margin in this figure automat-
ically adjusts to whatever size necessary to maintain the paragraph’s size
and position.
If you set all three width properties — width, margin-left, and margin-
right — to a specific, absolute size (such as 150 pixels), you’ve created an
impossibility. What can the browser do when the user stretches the browser
window? One of these three width measurements must become flexible. They
can’t all remain fixed, can they? In this situation, the browser automatically
changes the margin-right property to autoand ignores your specified size.
Specifying margins ............................................................................
If you specify left and right margins, but don’t specify width, an element
stretches its width to accommodate and maintain the requested margins. For
example, if you specify that the left and right margins should be 150 pixels,
the widthproperty of the paragraph then becomes (of necessity) auto.
p {margin-left: 50px; margin-right: 50px; border: 2px solid;}
Figure 11-3 illustrates that specifying both left and right margins but omitting
a width specification causes the browser to assume that the width is auto.
This next style has the same effect as the previous style in the preceding
code:
p {width: auto; margin-left: 50px; margin-right: 50px;
border: 2px solid;}
Figure 11-3:
When you
specify this
paragraph’s
margins,
but not its
width, the
paragraph
adjusts its
width as if
you had set
the width
to auto.
200 Part III: Adding Artistry: Design and Composition with CSS
