LAYOUTS - CSS: Professional Techniques for Modern Layout - page 146

To take a simple example, suppose you have a page where you always want the element at er
an h2 to start right below the bottom of the h2 . h e most common case is to have a i rst
paragraph begin with no “blank line” between it and the preceding heading. One way to do
this is with the adjacent-sibling heading (see “Sibling Selection” in Chapter 2). Another way,
pictured in Figure 4-41, is to put a negative bottom margin on the h2 .

h2 { border-bottom : 1px solid ; font-size : 150% ; margin-bottom : -0.67em ;}
p { margin : 1em 0 ;}

Figure 4-41: Bringing a heading and its following element close together.

You might think the paragraph lacks its top margin, but that's not so. It's still there. It's just
overlapping the h2 because the bottom margin edge of the h2 is actually near the top of the
characters in the h2 text. h e paragraph and its margin sit below that, not the bottom edge of
the h2 's border.

148

It's possible to use this general technique to put bits of content “on the same line.” h at's in
quotes because they're only visually aligned. Consider:

< ul class ="jump">
< li class ="prev">< a href ="ch03.html"> Salaries </ a ></ li >
< li class ="next">< a href ="ch05.html"> Punching the Clock </ a ></ li >
</ ul >

Now suppose we want these to sit next to each other in a line, as shown in Figure 4-42. We
could l oat them both, but there is another way.

ul.jump { list-style : none ; line-height : 1 ; width : 25em ;
margin : 0 auto ; padding : 0.25em 1em ; border : 1px solid ;}
li.next { text-align : right ; margin-top : -1em ;}

Figure 4-42: Pulling two elements into horizontal alignment.