Monday 23rd of October 2017 02:37:05 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

Figure 7-21

Figure 7-21. Margins on an inline element

This happens because margins on inline elements don't changethe line height of an element. (In fact, the only properties that canchange the distance between lines containing only text areline-height, font-size, andvertical-align.)

However, all of this is true only for the top and bottom sides ofinline elements; the left and right sides are a different story

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

to change the type of counter or bullet used for a list's items, you would use the list-style-type.



disc | circle | square | decimal | 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>larger than the surrounding text.</P>

Since we've given the "tall" text aillustrated in Figure 8-33.

Figure 8-33

Figure 8-33. Unlike balloons, floated elements can't float upward

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

Similar to rule 4, this keeps a floated element from floating all theway to the top of its parent element. Thus, if aDIV 's first child element is a paragraph,followed by a floated image and then another paragraph, the top of bottom, and left.


The element's box is completely removed from the flow of the document and positioned with respect to its containing block. Whatever space the element might have occupied in the normal document flow is closed up, as though the element did not exist. The size and position of the element are defined by a combination of the

Figure 5-11

Figure 5-11. Greater weight will usually confer visual boldness

Let's take this all one step further, and add two more rules,plus some markup, to illustrate how all this works (see Figure 5-12 for the results):

/*   assume only two faces for this example: 'Regular' and 'Bold'   */P {font-weight: 100;}   /* looks the same as 'normal' text */P SPAN {font-weight: 400;}   /* so does this */STRONG {font-weight: bolder;}   /* bolder than its parent */STRONG B {font-weight: bolder;}   /* bolder still */<P>