Saturday 18th of April 2015 05:19:41 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: 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

Since the default value of both width and height is auto, the result shown in Figure 9-4 is exactly the same as if you had used these styles:

top: 0; bottom: 0; left: 0; right: 50%; width: auto; height: auto;

Now let's say you want to position an element that is in the upper-right corner of its containing block and is one-third as wide as its containing block, but only as tall as necessary to display its content, as shown in Figure 9-5.

markers: 8.2.3. List Items
8.2.3. List Items
10.4.2. Markers
matching hyphenated values: Matching hyphenated values
matching single attribute values: Matching single attribute values
max-height property: Limiting width and height
max-width property: 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: In the middle
millimeters (mm): 3.2.1. Absolute Length Units
min-height property: Limiting width and height
min-max properties: Limiting width and height
min-width property: 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.

small-caps face by scaling uppercase letters on its own. The second is simply to make all letters uppercase and the same size, exactly as if the declaration text-transform: uppercase; had been used instead, as shown in Figure 5-30. This is obviously not an ideal solution, but it is permitted.

H1 {font-variant: small-caps;}
Figure 5-30

Figure 5-30. Legal, if not optimal, rendering of small caps


because some borders are "intermittent" -- for example, dotted and dashed styles -- and the element's background should appear in the spaces between the visible portions of the border.

Every border has three aspects: its width, or thickness; its style, or appearance; and its color. The default value for the width of a border is medium , which is not explicitly defined but usually works out to be two or three pixels. Despite this, the reason you don't usually see borders is that the default style

This will match any paragraph that is the first child of aDIV that immediately follows anH1 element. See Chapter 10, "CSS2: A Look Ahead",CSS2: A Look Ahead, for more details.

Figure 11-13

Figure 11-13. First-letter styling

Having set the article's body to the appearance we want, allthat remains is to adjust the placement of the divisions so that thecolumns are of roughly equal length. We can do this now because BIG element, the overall height of the line box has been increased, thus providing enough room for the BIG element to be displayed without overlapping any other text and without changing the line-height of all lines in the paragraph. We use a value 1em so that the line-height for the BIG element will be set to the same size as BIG's font-size -- remember, line-height is set in relation to the to a point below any previous floats, as illustrated by Figure 8-36 (where the floats start on the next line inorder to more clearly illustrate the principle at work here). Thisrule first appeared in CSS2, to correct its omission in CSS1.

Figure 8-36

Figure 8-36. If there isn't room, floats get pushed to a new line

8. A floating element must be placed as high aspossible.

Subject to the restrictions introduced by the previous seven rules,of course. Historically, browsers aligned the top of a floated