Online Book Reader

Home Category

HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [93]

By Root 1643 0

border: black 2px solid;

}

#margin {

margin: 5px;

}

#padding {

padding: 5px;

}

#both {

margin: 5px;

padding: 5px;

}

Margins and padding

This paragraph has the default margins and padding

This paragraph has a margin but no padding

This paragraph has padding but no margin

This paragraph has a margin and padding

You can determine margin and padding using any of the standard CSS measurement units, but the most common are pixels and ems.


Positioning elements with margins and padding

As with borders, you can use variations of the margin and padding rules to affect spacing on a particular side of the element. One particularly important form of this trick is centering.

In old-style HTML, you could center any element or text with the

tag. This was pretty easy, but it violated the principle of separating content from style. The text-align: center rule is a nice alternative, but it only works on the contents of an element. If you want to center an entire block-level element, you need another trick, as you can see in Figure 4-7.

This page illustrates a few interesting ideas:

Figure 4-7: Using margins to adjust positioning.

♦ You can adjust the width of a block. The main div that contains all the paragraphs has its width set to 75 percent of the page body width.

♦ Center an element by setting margin-left and margin-right to auto. Set both the left and right margins to auto to make an element center inside its parent element. This trick is most frequently used to center divs and tables.

♦ Use margin-left to indent an entire paragraph. You can use margin-left or margin-right to give extra space between the border and the contents.

♦ Percentages refer to percent of the parent element. When you use percentages as the unit measurement for margins and padding, you’re referring to the percentage of the parent element; so a margin-left of 50 percent leaves the left half of the element blank.

♦ Borders help you see what’s happening. I added a border to the mainBody div to help you see that the div is centered.

♦ Setting the margins to auto doesn’t center the text. It centers the div (or other block-level element). Use text-align: center to center text inside the div.

The code that demonstrates these ideas is shown here:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

center.html

Centering

This paragraph is part of the centered main body.

This paragraph is indented to the right.


Changing the Background Image

You can use another CSS rule — background-image — to apply a background image to a page or elements on a page. Figure 4-8 shows a page with this feature.

Figure 4-8: This page has a background image for the body and another for the heading.

Background images are easy to apply. The code for backgroundImage.html shows how:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

backgroundImage.html

Return Main Page Previous Page Next Page

®Online Book Reader