CSS: The Definitive Guide, 3rd Edition (27 page)

Negative margins do have an impact on vertical
formatting, and they affect how margins are collapsed. If negative vertical
margins are set, then the browser should take the absolute maximum of both
margins. The absolute value of the negative margin is then subtracted from the
positive margin. In other words, the negative is added to the positive, and the
resulting value is the distance between the elements.
Figure 7-21
provides two concrete
examples.

Figure 7-21. Examples of negative vertical margins

Notice the "pulling" effect of negative top and bottom margins. This
is really no different from the way that negative horizontal margins cause an
element to push outside of its parent.
Consider:

p.neg {margin-top: -50px; margin-right: 10px;
margin-left: 10px; margin-bottom: 0;
border: 3px solid gray;}


A paragraph.

A div.

As
you see in
Figure 7-22
, the paragraph
has simply been pulled upward by its negative top margin. Note that the content of
the
div
that follows the paragraph in the
markup has also been pulled upward 50 pixels.

Figure 7-22. The effects of a negative top margin

The negative bottom margin makes the paragraph look like it's been
pulled upward. Compare the following markup to the situation depicted in
Figure
7-23
:

p.neg {margin-bottom: -50px; margin-right: 10px;
margin-left: 10px; margin-top: 0;
border: 3px solid gray;}


A paragraph.



The next paragraph.

Figure 7-23. The effects of a negative bottom margin

What's really happening in
Figure
7-23
is that the elements following the
div
are placed according to the location of the bottom of the
div
. As you can see, the end of the
div
is actually above the visual bottom of its child
paragraph. The next element after the
div
is
the appropriate distance from the bottom of the
div
. This is expected, given the rules you used.

Now let's
consider an example where the margins of a list item, an unordered list, and a
paragraph are all collapsed. In this case, the unordered list and paragraph are
assigned negative
margins:

li {margin-bottom: 20px;}
ul {margin-bottom: -15px;}
h1 {margin-top: -18px;}

The
larger of the two negative margins (
-18px
) is
added to the largest positive margin (
20px
),
yielding 20px - 18px = 2px. Thus, there are only two pixels between the bottom of
the list item's content and the top of the
h1
's
content, as you can see in
Figure
7-24
.

Figure 7-24. Collapsing margins and negative margins, in detail

One area of unresolved behavior is that if elements overlap each other
due to negative margins, it's hard to tell which elements are on top. You may also
have noticed that none of the examples in this section use background colors. If
they did, their content might be overwritten by the background color of a
following element. This is expected behavior since browsers usually render
elements in order from beginning to end, so a normal-flow element that comes later
in the document can be expected to overwrite an earlier element, assuming the two
end up overlapping.

Figure 7-25. The content of list items

For a more detailed exploration of lists and how they can be styled, see
Chapter 12
.

Figure 7-26. Markers inside and outside the list

Figure 7-27. A single-line inline element

Figure 7-28. A multiple-line inline element

Figure 7-29. Showing lines in different alignments

Anonymous text

This is any string of characters that is not contained within an inline
element. Thus, in the markup

I'm
so happy!


, the sequences " I'm "
and " happy!" are anonymous text. Note that the spaces are part of the text
since a space is a character like any other.

Em box

This is defined in the given font, otherwise known as the character box.
Actual glyphs can be taller or shorter than their em boxes, as discussed in
Chapter 5
. In CSS, the value of
font-size
determines the height of
each em box.

Content area

In nonreplaced elements, the content area can be one of two things, and
the CSS2.1 specification allows user agents to choose which one. The content
area can be the box described by the em boxes of every character in the
element strung together, or it can be the box described by the character
glyphs in the element. In this book, I use the em box definition for
simplicity's sake. In replaced elements, the content area is the intrinsic
height of the element plus any margins, borders, or padding.

Leading

The leading is the difference between the values of
font-size
and
line-height
. This difference is actually divided in half and
applied to the top and bottom of the content area. These additions to the
content area are called, not surprisingly, half-leading. Leading is applied
only to nonreplaced elements.

Inline box

This is the box described by the addition of the leading to the content
area. For nonreplaced elements, the height of the inline box of an element
will be exactly equal to the value for
line-height
. For replaced elements, the height of the inline box
of an element will be exactly equal to the content area since leading is not
applied to replaced elements.

Line box

This is the shortest box that bounds the highest and lowest points of the
inline boxes
that
are found in the line. In other words, the top edge of the line box is
placed along the top of the highest inline box top, and the bottom of the
line box is placed along the bottom of the lowest inline box bottom.

• The content area is analogous to the content box of a block-level
  element.
  

• The background of an inline element is applied to the content area plus any
  padding.
  

• Any border on an inline element surrounds the content area plus any padding
  and borders.
  

• Padding, borders, and margins on nonreplaced elements have no vertical
  effect on inline elements or the boxes they generate; that is, they do
  not
  affect the height of an element's inline box (and
  thus the line box that contains the element).
  

• Margins and borders on replaced elements
  do
  affect the
  height of the inline box for that element and, by implication, the height of
  the line box for the line containing the element.
  

1. Determine the height of the inline box for each element in the line by
   following these steps:
   

   1. Find the values of
      font-size
and
      line-height
for each inline
      nonreplaced element and any text that is not part of a descendant inline
      element. Then combine them by subtracting the
      font-size
from the
      line-height
, which yields the leading for the box. The leading
      is split in half and applied to the top and bottom of the em
      boxes.
      

   2. Find the values of
      height
,
      margin-top
,
      margin-bottom
,
      padding-top
,
      padding-bottom
,
      border-top-width
, and
      border-bottom-width
for each replaced element and add them
      together.
      

2. For each content area, determine how much of it is above the baseline for
   the overall line and how much of it is below the baseline. This is not an easy
   task: you must know the position of the baseline for each element and piece of
   anonymous text, and the baseline of the line itself; then you must line them
   all up. In addition, the bottom edge of a replaced element sits on the baseline
   for the overall line.
   

3. Determine the vertical offset of any elements that have been given a value
   for
   vertical-align
. This will tell you how
   far up or down that element's inline box will be moved, and will change how
   much of the element is above or below the baseline.
   

4. Now that you know where all of the inline boxes have come to rest, calculate
   the final line box height. To do so, just add the distance between the baseline
   and the highest inline box top to the distance between the baseline and the
   lowest inline box bottom.