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

h e negative one-em top margin of li.next pulls it upward by just the right amount (since
we already dei ned line heights in this element to be 1 ).
Another useful trick is to pull elements partway out of their containers. Suppose you wanted a
section's heading to be in a box that's centered on a dividing line (as in Figure 4-43). Here's the
markup and CSS:
.entry { border-top : 1px solid gray ;}
.entry h2 { width : 80% ; background : #FFF ; border : 1px solid gray ;
margin : -0.67em auto 0 ; text-align : center ;}
< div class ="entry">
< h2 > The Web Stack </ h2 >
…
</ div >
149
Figure 4-43: Centering a heading on a dividing line.
On the other hand, maybe you want the box to be “shrink-wrapped” to the text, not a
predei ned width. In that case, you need a little more markup, but just a little:
< div class ="entry">
< h2 > The Web Stack </ h2 >
…
</ div >
h en you just shit the CSS around a bit (see also Figure 4-44):
.entry h2 { margin-top : -0.67em ; text-align : center ;}
.entry h2 span { background : #FFF ; border : 1px solid gray ; padding : 0.25em 1em ;}
h ere you go!