Wednesday 28th of June 2017 07:18:09 AM

Book Home

Cascading Style Sheets: The Definitive GuideSearch this book

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: M

margin-bottom property: 7.3.4. Single-Side Margin Properties
margin-left property: 7.3.4. Single-Side Margin Properties
margin property: 7.3. Margins
margin-right property: 7.3.4. Single-Side Margin Properties
margin-top property: 7.3.4. Single-Side Margin Properties
margins: 7. Boxes and Borders
7.3. Margins
collapsing: 7.3.5. Collapsing Margins
block-level elements: 8.2.1.2. Collapsing vertical margins
floated elements: 7.6.1. Floated Elements
horizontal, noncollapsing: 8.2.2. Horizontal Formatting
inline elements and: 7.3.7. Margins and Inline Elements
caution with: 7.3.8. Margins: Known Issues
length values and: 7.3.1. Length Values and Margins
negative (see negative margins)
vs. padding: 7.2. Margins or Padding?
percentages and: 7.3.2. Percentages and Margins
replication: 7.3.3. Replicating Values
single side, setting margin for: 7.3.4. Single-Side Margin Properties
table cells and: 1.3.1. Limited Initial Scope
markers: 8.2.3. List Items
8.2.3. List Items
10.4.2. Markers
matching hyphenated values: 10.2.2.5. Matching hyphenated values

Chapter 9. Positioning

Theidea behind positioning is fairly simple. It allows you to defineexactly where element boxes will appear relative to where they wouldordinarily be -- or relative to a parent element, or anotherelement, or even to the browser window itself. The power of thisfeature is both obvious and surprising. It shouldn't be toosurprising to learn that this is the part of CSS2 that user agentsusually first attempt to support. Given that there were some verygood positioning implementations on the horizon as the book was being

matching single attribute values: 10.2.2.3. Matching single attribute values
max-height property: 9.1.3.2. Limiting width and height
max-width property: 9.1.3.2. Limiting width and height
media types: 1.3.1. Limited Initial Scope
10.8. Media Types and @-rules
Microsoft Internet Explorer (see Internet Explorer)
middle alignment: 4.1.3.5. In the middle
millimeters (mm): 3.2.1. Absolute Length Units
min-height property: 9.1.3.2. Limiting width and height
min-max properties: 9.1.3.2. Limiting width and height
min-width property: 9.1.3.2. Limiting width and height
monospace fonts: 5.1. Font Families
multiple pages, using styles on: 1.2.3. Using Your Styles on Multiple Pages


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


Library Navigation Links

Copyright © 2002 O'Reilly & Associates, Inc. All Rights Reserved.

line-height distributes extra space both above andbelow each line of text, it actually adds (or subtracts) a certainamount from the top and bottom of an inline element.This leads to some odd cases when a line has elements with differentfont sizes, but for the moment, let's stick to a simple case.Assume that the default font-size of a paragraphis 12pt and consider the following:

P {line-height: 16pt;}

Since the "inherent" line height of 12-point text is 12

SUB {vertical-align: sub;}<P>This paragraph contains <SUB>subscripted</SUB> text.</P>
Figure 4-32

Figure 4-32. Subscript alignment

Of course, you could make the text smaller by usingfont-size, but you have to do it yourself.

super acts in a fashion similar tosub, but in this case, the element'sbaseline (or bottom of a replaced element) is raised with respect tothe parent's baseline. Again, the distance the text will be

8.4.4. Inline Replaced Elements

Inlinereplaced elements, such as images,are subject to a few crucial differences in how inline formatting is

Here, if we set values for the left or right margin, they will be visible, as Figure 7-23 makes obvious:

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

Figure 7-23. An inline element with a left margin

Note the extra space between the end of the word just before the inline element, and the edge of the inline element's background. This can end up on both ends of the inline if we wish:

B {margin: 10px; background: silver;}