Box Elements and Block-Level Elements Are Key to XHTML Documents

Adjust the Look and Feel of Box Elements

Box Properties

Image courtesy J Kyrnin

• margin
  The margin is the area around the outside of the box. This places space around the element that is transparent - in other words, it's the same color as the background.
• border
  The border is a line around the box. The default is for it to be 0 pixels wide, and thus not visible.
• padding
  The padding is space within the box itself. This is also transparent, but to the background color of the box object itself.
• width
  The width is the width of the object, not including all borders, padding, and margins. Note that some browsers interpret this incorrectly, and include the width of margins, borders, and padding in the width of the object, so be sure to test your CSS in various browsers.

Index: Box Elements and Block-Level Elements Are Key to XHTML Documents

1. What are Box Elements?
2. Why Care About Box Elements?
3. Adjust the Look and Feel of Box Elements
4. Adjust the Position of Box Elements