8.2.2.3. More than one auto

Now let us consider the cases where two of these three properties are set to auto. If both the margins are set to auto, then they are set to equal lengths, thus centering the element within its parent, as you can see from Figure 8-14: 

P {width: 100px; margin-left: auto; margin-right: auto;}
Figure 8-14

Figure 8-14. Setting an explicit width

This is the correct way to center block-level elements, as a matter

Saturday 22nd of November 2008 06:31:57 AM

Nice and Free CSS Templates

This site contains free css templates for your website - Just copy and paste and there you have a stunning website !

Menu und content
dynamic
Menu fixed, content
dynamic
Menu und content
dynamic

3 columns all
dynamic
4 columns all
dynamic
Menu floating

Menu fix, Inhalt u.
Head dynamic
3 columns fix
centered
dynamic mit
Head und Footer

fixed BOX centered
dynamic BOX
centered
fixed Box total
centered
P.three {line-height: 0.33in;} <P>This paragraph inherits a 'line-height' of 14pt from the BODY, as well as a 'font-size' of 13pt.</P> <P CLASS="one">This paragraph has a 'line-height' of 16.8pt (14 * 1.2), so it will have slightly more line-height than usual.</P> <P CLASS="two">This paragraph has a 'line-height' of 15pt (10 * 150%), so it will have slightly more line-height than usual.</P> <P CLASS="three">This paragraph has a 'line-height' of 0.33in, so it will have slightly more line-height than usual.</P>
Figure 4-23

Figure 4-23. Simple calculations with the line-height property

Figure 8-63

Figure 8-63. Increasing line-height to leave room for inline borders

This approach works in this particular case, of course, because all of the text is the same size. Just to cover all the bases, though, it might make more sense to simply increase the line-height of the anchor element itself, like this: 

A:link {border: 5px solid blue; line-height: 24px;}
P {font-size: 14px;}