Chapter 19. Basic Box Properties


The box model was briefly introduced in Chapter 16 as one of the fundamental concepts of CSS visual formatting. According to the box model, every element in a document generates a box to which such properties as width, height, margins, padding, and borders may be applied.

These element box properties (as well as those for positioning as discussed in Chapter 21), are at the heart of CSS-driven layout and design. Effects that once required tables, such as putting text in a colored box, can now be handled entirely with style sheets. This is just one way that style sheets have liberated developers from the inappropriate use of (X)HTML elements for visual effects. And that's just scratching the surface. Many visual effects created with CSS box properties simply weren't possible before using (X)HTML alone.

The box model is also at the core of some of the most notorious headaches for web developers, namely, the fact that all versions of Internet Explorer for Windows (except IE 6 and 7 running in Standards mode, as described in Chapter 9) interpret the width of the box differently than all other CSS-compliant browsers. This has made it necessary for web developers to jump through all sorts of hoops to replicate layouts consistently on all browsers. For more on the IE/Windows box model problem, see Chapter 25.

This chapter covers the box model in more depth and introduces the basic box properties for specifying size and adding margins, borders, and padding, as listed next.

height

border-top-style

border-top

width

border-right-style

border-right

max-height

border-bottom-style

border-bottom

max-width

border-left-style

border-left

min-height

border-style

border

min-width

border-top-width

padding-top

margin-right

border-right-width

padding-right

margin-left

border-bottom-width

padding-bottom

margin-top

border-left-width

padding-left

margin-bottom

border-width

padding

margin

border-top-color

 
 

border-right-color

 
 

border-bottom-color

 
 

border-left-color

 
 

border-color

 


The box model will be addressed again in Chapter 21 as it relates to positioning and the layout of the page.





Web Design in a Nutshell
Web Design in a Nutshell: A Desktop Quick Reference (In a Nutshell (OReilly))
ISBN: 0596009879
EAN: 2147483647
Year: 2006
Pages: 325

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net