Tuesday 21st of October 2014 10:41:27 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)
Figure 8-55

Figure 8-55. The effects of a very small inline box

On the other hand, we could set the "tall" text to have a line-height which is actually bigger than its font-size. For example:

<P STYLE="font-size: 12px; line-height: 12px;">
This is text, <EM>some of which is emphasized</EM>, plus other text<BR>
which is <B STYLE="font-size: 24px;">boldfaced</B>
and <SPAN STYLE="vertical-align: top; line-height: 18px;">tall</SPAN>
and which is<BR>
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: 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.

P {margin: -10%;}

Figure 7-20 illustrates the consequences of such a rule, where the amount by which paragraphs overlap each other and spill beyond the browser window is entirely dependent on the width of the window itself -- and the wider the window, the worse the situation becomes.

Figure 7-20

Figure 7-20. The dangers of document-wide negative-margin rules

Using negative margins with block-level elements image to be repeated in the horizontal or vertical directions,respectively, and no-repeat prevents the imagefrom tiling in any direction.

By default, the background image will start from the top left cornerof an element. (We'll see how to change this later in thechapter.) Therefore, the following rules will have the effect seen inFigure 6-28:

BODY {background-image: url(yinyang.gif);selector. This is in some ways like the child selector,
but in this case, styles are applied to elements that share a parent
and are next to each other in the document tree. For example:

H2 + P {color: silver;}

In the first set of markup, a paragraph immediately follows an H2, so it is silver. In the second, the element adjacent to the H2 is a UL, which does not match the rule, and neither does the paragraph right after that. Finally, even though there is text directly after the