is one major difference between margins and padding when it comes to inline elements. Let's turn things around and talk about left and right padding first off. Here, if we set values for the left or right padding, they will be visible, as Figure 7-60 makes apparent.

B {padding-left: 10px; padding-right: 10px; background: silver;}

Figure 7-60. Padding on an inline element

Note the extra background space that appears on either end of the boldfaced text. There's your padding. chatten kostenlos flirt dating flirten Wednesday 19th of June 2013 10:24:47 AM

Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Index: Y

There are no index entries for this letter.

Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

of the green being used. The art department reports that this particular shade of green uses no red or blue, and just 40% green; someone there has had the foresight to use web-safe colors. (Remember, this is a hypothetical situation.) We want to do the same for the visited links, so we write:

A:link {color: rgb(0%,40%,0%);}
A:visited {color: rgb(20%,20%,20%);}

This gives us our dark green and dark gray hyperlinks.

Now for headings. They're all supposed to be in a sans serif

P {letter-spacing: 0;}    /*  identical to 'normal'  */P.spacious {letter-spacing: 0.25em;}P.tight {letter-spacing: -0.25em;}<P>The letters in this paragraph are spaced as normal.</P><P CLASS="spacious">The letters in this paragraph are spread out a bit.</P><P CLASS="tight">The letters in this paragraph are smooshed together a bit.</P>

Figure 4-50. Various kinds of letterspacing

One interesting use for letter-spacing is toincrease emphasis, which is a technique that was common in pastcenturies. Thus, you might declare the following to get an effect

4.1.1.2. Aligning text

Even more basic than text-indent is the property text-align, which affects how lines of text in an element are aligned with respect to one another. There are four values; the first three are pretty simple, but the fourth has a few complexities.

Figure 4-10. Behaviors of the text-align property

the image, its padding, and its border. This is because the totality of the replaced element (content, padding, borders) make up the inline box for the replaced element. This is what forces the line boxes to be taller in Figure 8-66.

Margins are also contained within the line box, but they have their own wrinkle. Setting a positive margin is no mystery: it will simply make the line box taller, as in Figure 8-67.

Figure 8-67. Adding padding, borders, and margins to an inline replaced element

Figure 7-21. Margins on an inline element

This happens because margins on inline elements don't change the line height of an element. (In fact, the only properties that can change the distance between lines containing only text are line-height, font-size, and vertical-align.)

However, all of this is true only for the top and bottom sides of inline elements; the left and right sides are a different story