Saturday 21st of October 2017 06:40:17 AM


This area should be horizontally and vertically centered.
This text stays left aligned
ie mac doesn't like this!
more nice and free css templates

H1 {padding: 10px; background-color: silver;}
Figure 7-56

Figure 7-56. Padding applied to an H1 element

On the other hand, we might want H1 elements tohave uneven padding and H2 elements to have regular padding, as shownin Figure 7-57:

H1 {padding: 10px 0.25em 3ex 3cm;} /* uneven padding */H2 {padding: 0.5em 2em;} /* values replicate to the bottom and left sides */
Figure 7-57

Figure 7-57. Uneven padding

It's a little tough to see the padding, though, so let's


This isn't to say that you shouldn't use negative values, of course, just that there are issues to consider. As always.


Although most CSS-aware browsers (Explorer 4.x and 5.x and Opera 3.5 and later) honor negative background positions, the effects are wildly unpredictable at best. This applies even to negative lengths, which can cause unwanted tiling, inappropriate positioning of the background images, and more. If you really need to

P {font-size: 12px; line-height: 18px;}
IMG {height: 30px; margin: 0; padding: 0;}
Figure 8-65

Figure 8-65. Replaced elements don't actually increase the line height

Despite all the blank space, the effective value of line-height has not changed. It simply has no effect on the image's inline box, which is in this case 30px tall.

Nonetheless, an inline replaced element still has a value forpositioned element. Also, since it has a transparent background, theparent element's text shows through the positioned element. Theonly way to avoid this is to set a background for the positionedelement.

Note that the boldface element in this case is positioned in relationto its parent element's content box, which defines itscontaining block. Without the relative positioning of the parentelement, the containing block would be another element. Consider acase where the element being positioned is a child of thehave.

Turn to Figure 7-25 to see what happens when aninline element with a margin is displayed across multiple lines:

B {margin: 10px; background: silver;}
Figure 7-25

Figure 7-25. An inline element displayed across two lines of text with a 10-pixel margin

The left margin is applied to the beginning of the element, and theright margin to the end of it. Margins are notapplied to the right and left side of each line. Also, you can see

5. A floating element's top may not be higher than the top of any earlier floating or block-level element.

Similar to rule 4, this keeps a floated element from floating all the way to the top of its parent element. Thus, if a DIV 's first child element is a paragraph, followed by a floated image and then another paragraph, the top of the floated image can't be any higher than the top of the paragraph that precedes it. It is also impossible for a floated element's top to be any higher than the top of a floated