Friday 24th of October 2014 05:23:59 PM

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


BODY {color: rgb(0%,50%,0%); background-color: #CCFFCC;}H1, H2 {color: yellow; background-color: rgb(0,51,0);}
Figure 6-19

Figure 6-19. The results of a simple style sheet

This style sheet is more sophisticated (shown in Figure 6-20):

BODY {color: black; background-color: white;}P {color: #333;}PRE, CODE, TT {color: rgb(50%,50%,50%); background-color: #FFFFCC;}A:link {color: blue; background-color: yellow;}A:visited {color: navy; background-color: white;}

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.

interesting ways. The most common is known as a "hanging indent," where the first line hangs out to the left of the rest of the element, as shown in Figure 4-3:

P {text-indent: -4em;}
Figure 4-3

Figure 4-3. Negative text indenting

As you can see in Figure 4-3, there is an inherent danger in setting a negative value for text-indent: the first three words ("This is background image has been set to be fixed, it ispositioned with respect to the viewing area, not the element thatcontains it. However, the background will only be visible within itscontaining element. This leads to a rather interesting consequence.

Let's say we have a document with a tiled background thatactually looks like it's tiled and an H1element with the same pattern, only in a different color. Both theBODY and H1 elements are set tohave fixed backgrounds, resulting in something

H1 {border-bottom: 3px solid gray;}H2 {border-bottom: solid gray 3px;}H3 {border-bottom: 3px gray solid;}
Figure 7-47

Figure 7-47. Getting the same result in three different ways

You can also leave out some values and have their defaults kick in,like this:

Since no border color is declared, the default value (theelement's foreground) is applied instead, as we can see in that has been pinned to a specific size, and the content doesn't fit. You can take control of the situation with the overflow property.

overflow

This property only applies in one (or more) the following cases:

  • When an element has negative margins.