Learning Web Design Third Edition- P30 pdf

Part III: CSS for Presentation
276
Margins
margin
Values:
length measurement | percentage |
auto
|
inherit
Default:

auto
Applies to:
all elements
Inherits:
no
The margin properties are very straightforward to use. You can specify an
amount of margin to appear on each side of the element, or use the margin
property to specify all sides at once.
The shorthand margin property works the same as the padding shorthand.
When you supply four values, they are applied in clockwise order (top, right,
bottom, left) to the sides of the element. If you supply three values, the middle
value applies to both the left and right sides. When two values are provided,
the first is used for the top and bottom, and the second applies to the left and
right edges. Finally, one value will be applied to all four sides of the element.
As for most web measurements, em units are your best bet for providing mar-
gin amounts that scale along with the text. Pixel values are commonly used
as well. You can also provide a percentage value, but it should be noted that,
as for padding, the percentage value is calculated based on the width of the
parent element. If the parent’s width changes, so will the margins on all four
sides of the child element. The auto keyword allows the browser to fill in the

amount of margin necessary to fit or fill the available space.
Figure 14-14 shows the results of the following margin examples. Note that
I’ve added a light dotted rule to indicate the outside edge of the margin for
clarity purposes only, but they would not appear on a real web page.
A
p#A {
margin: 4em;
border: 1px solid red;
background: #FCF2BE;
}
B
p#B {
margin-top: 2em;
margin-right: 250px;
margin-bottom: 1em;
margin-left: 4em;
border: 1px solid red;
background: #FCF2BE;
}
C
body {
margin: 0 10%;
border: 1px solid red;
background-color: #BBE09F;
}
Browser Default
Margins
You may have noticed that space
is added automatically around
headings, paragraphs, and other

block elements. That’s the browser’s
default style sheet at work, applying
margin amounts above and below
those elements.
It is good to keep in mind that the
browser is applying its own values
for margins and padding behind the
scenes. These values will be used
unless you specifically override them
with your own style rules.
If you are working on a design and
coming across mysterious amounts
of space that you didn’t add, the
browser’s default styles may be the
culprit.
c S S t I P
Browser Default
Margins
You may have noticed that space
is added automatically around
headings, paragraphs, and other
block elements. That’s the browser’s
default style sheet at work, applying
margin amounts above and below
those elements.
It is good to keep in mind that the
browser is applying its own values
for margins and padding behind the
scenes. These values will be used
unless you specifically override them

with your own style rules.
If you are working on a design and
coming across mysterious amounts
of space that you didn’t add, the
browser’s default styles may be the
culprit.
c S S t I P
Adding a margin to the
body element adds space
between the page content
and the edges of the
browser window.
Adding a margin to the
body element adds space
between the page content
and the edges of the
browser window.
Margins
Chapter 14, Thinking Inside the Box (Padding, Borders, and Margins)
277
body: 0 10%;
Adding margins to the body puts space between the
element and the edges of the viewing area of the browser
window. The red border shows the boundary of the
body element (there is no padding applied).
margin: 4em;
margin-top: 2em;
margin-right: 250px;
margin-bottom: 1em;
margin-left: 4em;

A
B
C
Figure 14-14. Applying margins to the body and to individual elements.
Margin behavior
While it is easy to write rules that apply margin amounts around (X)HTML
elements, it is important to be familiar with margin behavior.
Collapsing margins
The most significant margin behavior to be aware of is that the top and bottom
margins of neighboring elements collapse. This means that instead of accumu-
lating, adjacent margins overlap, and only the largest value will be used.
Using the two paragraphs from the previous figure as an example, if the top
element has a bottom margin of 4 ems, and the following element has a top
margin of 2 ems, the resulting margin space between elements does not add
up to 6 ems. Rather, the margins collapse and the resulting margin between
the paragraphs will be 4 ems, the largest specified value. This is demonstrated
in Figure 14-15.
Part III: CSS for Presentation
278
Margins
Adjacent vertical
margins collapse
4em
Figure 14-15. Vertical margins of neighboring elements collapse so that only the larger
value is used.
The only time top and bottom margins don’t collapse is for floated or abso-
lutely positioned elements (we’ll get to floating and positioning in Chapter
15). Margins on the left and right sides never collapse, so they’re nice and
predictable.
Margins on inline elements

You can apply top and bottom margins to inline text elements (or “non-
replaced inline elements”, to use the proper CSS terminology), but it won’t add
vertical space above and below the element, and the height of the line will
not change. However, when you apply left and right margins to inline text
elements, margin space will be held clear before and after the text in the flow
of the element, even if that element breaks over several lines.
Just to keep things interesting, margins on replaced elements, such as images,
do render on all sides, and therefore do affect the height of the line. See Figure
14-16 for examples of each.
img { margin: 2em;}
Margins are rendered on all sides of replaced elements, such as images.
em { margin: 2em;}
Only horizontal margins are rendered on non-replaced (text) elements.
Figure 14-16. Margins applied to inline text and image elements.
Collapsing Margins
When spacing between and around
elements behave unpredictably,
collapsing margins are often to
blame. Here are a few articles that
dig deep into collapsing margin
behavior. They may help you
understand what is happening
behind the scenes in your layouts.
“No Margin for Error” by Andy
Budd (www.andybudd.com/
archives/2003/11/no_margin_
for_error/)
“Uncollapsing Margins” by Eric
Meyer (www.complexspiral.
com/publications/uncollapsing-

margins/)
“CSS: Auto-height and Margin-
collapsing,” by Minz Meyer
(www.researchkitchen.de/blog/
archives/css-autoheight-and-
margincollapsing.php)



F U R t H e R R e A D I n G
Collapsing Margins
When spacing between and around
elements behave unpredictably,
collapsing margins are often to
blame. Here are a few articles that
dig deep into collapsing margin
behavior. They may help you
understand what is happening
behind the scenes in your layouts.
“No Margin for Error” by Andy
Budd (www.andybudd.com/
archives/2003/11/no_margin_
for_error/)
“Uncollapsing Margins” by Eric
Meyer (www.complexspiral.
com/publications/uncollapsing-
margins/)
“CSS: Auto-height and Margin-
collapsing,” by Minz Meyer
(www.researchkitchen.de/blog/

archives/css-autoheight-and-
margincollapsing.php)



F U R t H e R R e A D I n G
Margins
Chapter 14, Thinking Inside the Box (Padding, Borders, and Margins)
279
Negative margins
It is worth noting that it is possible to specify negative values for margins.
When you apply a negative margin, the content, padding, and border are
moved in the opposite direction that would have resulted from a positive
margin value.
This will be more clear with an example. Figure 14-17 shows two neighboring
paragraphs with different colored borders applied to show their boundaries.
In the top view, I’ve added a 4-em bottom margin to the top paragraph and
it has the effect of pushing the following paragraph down by that amount.
If I specify a negative value (-4em), the following element moves up by that
amount, and overlaps the element with the negative margin.
p.top { margin-bottom: -4em;}
The following element moves back by 4 ems.
p.top { margin-bottom: 4em;}
Pushes the following paragraph element away by 4 ems.
Figure 14-17. Using negative margins.
This may seem like a strange thing to do, and in fact, you probably wouldn’t
make blocks of text overlap as shown. The point here is that you can use
margins with both positive and negative values to move elements around on
the page. This is the basis of many CSS layout techniques.
Now let’s use margins to add some space between parts of the JenWARE

home page in Exercise 14-3. You’ll also see how margins are used to properly
center an element in the width of the browser window.
Part III: CSS for Presentation
280
Margins
exercise 14-3
|
Adding margin space around
elements
Open jenware.html in your text editor if it isn’t open already, and we’ll get some
margins in there. We’ll be using a variety of properties and values along the way. Feel
free to save the page and look at it in the browser after each step.
First, we’ll add some space between the browser window and the sides of the
content. Making the margins 12% of the browser window should give it plenty of
space, and it will scale proportionally for different browser widths. To add space
around the whole page, you use the
body
element, of course.
body {
margin-left: 12%;
margin-right: 12%;
font: 76% Verdana, sans-serif;
background: #FCF191 url(images/top-background.gif) repeat-x;
}
Now let’s add some space above and below the “intro” section of the page. This
time, we’ll use the shorthand
margin
property to add 3-em margins to the top
and bottom edges only.
#intro {

margin: 3em 0;
text-align: center;
}
So far, we’ve been using measurement values exclusively for the
margin
property.
Another option is to use the
auto
keyword and let the browser apply as much
margin as is necessary to fill the available space. If you set the margin to
auto
on
the left and right sides of an element, it has the effect of keeping the element
centered in the width of the browser window or other containing element. In
fact, that is the proper method for centering elements horizontally.
We’ll use this technique to center the testimonials box on the page. First, set
the
width
of the element to 500 pixels. Then, apply a 2-em margin to the top
and bottom, and
auto
margin left and right. You can use the
margin
property as
shown here. Note that you have to declare a width so the browser knows how to
calculate the
auto
distances.
#testimonials {
width: 500px;

margin: 2em auto;
border: 1px dashed #F26521;
padding: 1em;
padding-left: 60px;
background: #FFBC53 url(images/ex-circle-corner.gif) no-repeat left
top;
line-height: 1.2em;
}
This isn’t the most beautiful design, but it’s only temporary. In the next chapter, we’ll
be putting this testimonials box into its own column in a two-column layout.
Finally, I’d like 3 ems of space above the product category
h2
elements
(particularly since there may be more in the future). By this point, I bet you could
write this one without my help, but for thoroughness’ sake, here is the new
declaration added to
h2
s in the “products” section.
1.
2.
3.
4.
N o t e
When the value is 0, you don’t need to
provide a specific unit.
N o t e
When the value is 0, you don’t need to
provide a specific unit.
To center an element in
the browser window, apply

a width to the element
and set its left and right
margins to auto.
To center an element in
the browser window, apply
a width to the element
and set its left and right
margins to auto.
Assigning Display Roles
Chapter 14, Thinking Inside the Box (Padding, Borders, and Margins)
281
A good understanding of padding, borders, and margins is the first step to
mastering CSS layouts. In the next chapter, we’ll learn about the proper-
ties used to float and position elements on the page. We’ll even turn the
JenWARE page into a two-column layout. But before we move on, there is
one more property to get out of the way.
Assigning Display Roles
As long as we’re talking about boxes and the CSS layout model, this is a good
time to introduce the display property. You should already be familiar with
the display behavior of block and inline elements in (X)HTML. However, not
all XML languages assign default display behaviors (or display roles, to use
the proper term from the CSS specification) to the elements they contain. For
this reason, the display property was created to allow authors to specify how
elements should behave in layouts.
display
Values:

inline
|
block

|
list-item
|
run-in
|
inline-block
|
table
|
inline-table
|
table-row-group
|
table-header-group
|
table-footer-group
|
table-row

|
table-column-group
|
table-column
|
table-cell
|
table-caption
|
none
|

inherit

Default:

disc
Applies to:

ul
,
ol
, and
li
(or elements whose display value is list-item)
Inherits:
yes
#products h2 {
margin-top: 3em;
border-left: 3px solid;
border-top: 1px solid;
padding-left: 1em;
font-size: 1.2em;
color: #921A66;
}
Save and look at it in the browser. There’s more space above
the product category headings now, but I don’t like all that
extra space above the first one. Fortunately, that heading has
been marked up as belonging to the class “first”, so we can
write another rule that applies zero margin above just that
heading.
This somewhat complicated selector targets

h2
elements
with the class “first” but only when they appear in the
div

with the
id
“products”.
#products h2.first {
margin-top: 0;
}
Save the document again and it should look something like the
one in Figure 14-18 (the width of your page may be different
depending on your browser and monitor size). The final style
sheet for this page is available in Appendix A.
5.
Figure 14-18. The JenWARE home page after adding padding,
borders, and margins.
Part III: CSS for Presentation
282
The Box Model in Review
The display property defines the type of element box an element generates
in the layout. In addition to the familiar inline and block display roles, you
can also make elements display as list items or the various parts of a table
(list and table display roles are addressed in Chapter 17, CSS Techniques).
In general, the W3C discourages the random reassigning of display roles for
(X)HTML elements. However, in certain scenarios, it is benign and has even
become commonplace. For example, it is common practice to make li ele-
ments (which usually display as block elements) display as inline elements to
turn a list into a horizontal navigation bar. You may also make an otherwise

inline a (anchor) element display as a block in order to give it a specific width
and height. These techniques are demonstrated in Chapter 17.
WA R N I N G
Bear in mind that changing the presentation of an (X)HTML element with the CSS
display property does not change the definition of that element as block-level or inline
in (X)HTML. Putting a block-level element within an inline element will always be
invalid (X)HTML, regardless of its display role.
Another useful value for the display property is none, which removes the
content from the normal flow entirely. Unlike visibility: hidden, which
just makes the element invisible, but holds the space it would have occupied
blank, display: none removes the content, and the space it would have occu-
pied is closed up.
One popular use of display: none is to prevent certain content from appear-
ing when the source document is displayed in specific media. For example,
you could have a paragraph that appears when the document is printed, but
is not part of the page when it is displayed on a computer screen.
The Box Model in Review
At this point you should have a good feel for element boxes and how to
manipulate the space within and around them. These are the raw tools you’ll
need to do real CSS-based layouts. In the next chapter, we’ll start moving the
boxes around on the page, but first, why not get some practice at writing
rules for padding, borders, and margins in the following test.
Test Yourself
In this test, your task is to write the declarations that create the effects shown
in each example. All the paragraphs shown here share a rule that sets the
dimensions and the background color for each paragraph. You need only to
provide the box-related property declarations. Answers, as always, appear in
Appendix A.
Test Yourself
Chapter 14, Thinking Inside the Box (Padding, Borders, and Margins)

283
p { background-color: #C2F670;
width: 200px;
height: 200px;}
All of the samples in
this exercise start out
styled as shown here
and share the
properties listed
below.
2 em
2 em
2 em
2 em
2 em
2 em
2 em
2 em
4 pixels 4 pixels
2 em
2 em
2 em
2 em
1 em
1 em
1 em
1 em
6 em 6 em
1 em
6 em

4 pixels
1 em
1 em
50 pixels
50 pixels
2 pixels
Some useful hints: outer margin edges are indicated by dotted blue lines. All
necessary measurements are provided in dark red. Borders use one of the 17
standard color names.
Part III: CSS for Presentation
284
Review: Basic Box Properties
Review: Basic Box Properties
The following is a summary of the properties covered in this chapter related
to the basic box model.
Property Description
border
A shorthand property that combines border properties
border-top,
border-right,
border-bottom,
border-left
Combine border properties for each side of the element
border-color
Shorthand property for specifying the color of borders
border-top-color,
border-right-color,
border-bottom-color,
border-left-color
Specify the color for each side of the element

border-style
Shorthand property for specifying the style of borders
border-top-style,
border-right-style,
border-bottom-style,
border-left-style
Specify the style for each side of the element
border-width
Shorthand property for specifying the width of borders
border-top-width,
border-right-width,
border-bottom-width,
border-left-width
Specify the width for each side of the element
display
Defines the type of element box an element generates
height
Specifies the height of the element’s content area
margin
Shorthand property for specifying margin space around an
element
margin-top,
margin-right,
margin-bottom,
margin-left
Specify the margin amount for each side of the element
max-height
Specifies the maximum height of an element
max-width
Specifies the maximum width of an element

min-height
Specifies the minimum height of an element
min-width
Specifies the minimum width of an element
overflow
How to handle content that doesn’t fit in the content area
padding
Shorthand property for specifying space between the con-
tent area and the border
padding-top,
padding-right,
padding-bottom,
padding-left
Specify the padding amount for each side of the element
width
Specifies the width of an element’s content area
285
IN THIS CHAPTER
Floating elements to the
left and right
Clearing floated elements
Relative positioning
Absolute positioning and
containing blocks
Fixed positioning
At this point, you’ve learned dozens of CSS properties that allow you to
change the appearance of text elements and the boxes they generate. But so
far, we’ve merely been decorating elements as they appear in the flow of the
document.
In this chapter, we’ll look at floating and positioning, the CSS methods for

breaking out of the flow and arranging elements on the page. Floating an
element moves it to the left or right, and allows the following text to wrap
around it. Positioning is a way to specify the location of an element anywhere
on the page with pixel precision.
We’ll start by examining the properties responsible for floating and position-
ing, so you’ll get a good feel for how the CSS layout tools work. In Chapter 16,
Page Layout with CSS, we’ll broaden the scope and see how these properties
are used to create common multicolumn page layouts.
Before we start moving elements around, let’s be sure we are well acquainted
with how they behave in the normal flow.
Normal Flow
We’ve covered the normal flow in previous chapters, but it’s worth a refresher.
In the CSS layout model, text elements are laid out from top to bottom in
the order in which they appear in the source, and from left to right (in left-
to-right reading languages*). Block elements stack up on top of one another
and fill the available width of the browser window or other containing ele-
ment. Inline elements and text characters line up next to one another to fill
the block elements.
When the window or containing element is resized, the block elements
expand or contract to the new width, and the inline content reflows to fit
(Figure 15-1).
For right-to-left reading languages such as Arabic and Hebrew, the normal flow is top to bottom
and right to left.
FLOATING AND
POSITIONING
CHAPTER
15