Chapter 9
Chapter 9: Spacing Out with Boxes .............................................................................
In This Chapter
Understanding the CSS box
Using margins of victory
Padding elements
Positioning elements
Adding lines
T
o gain a command of precision positioning using CSS, you must under-
stand the concept of the box. After you understand that, you can get a
good feel for the ways that elements are positioned within the browser
window. In this chapter, you find out how to use boxes and padding to posi-
tion elements on your Web pages.Getting a Grip on Boxes ..............................................................................
Each visual element in a CSS has an imaginary box around it that causes it to
perhaps take up more space on the page than its contents (the text or graph-
ics of the element) actually use. In other words, you can add optional padding,
border, and margins to an element that expand the area that the element uses.The box is a virtual diagram of the content (text or graphics), plus any
padding, border, or margin added to that content. Figure 9-1 illustrates
how padding, borders, and margins radiate out from the central contents.CSS defines two main types of elements: block-level (such as paragraphs) and
inline elements (such as <span>). Block-level elements are positioned in
ways that you can fairly quickly visualize. Inline elements can be less intu-
itive. (A containing block is simply a block-level element that has one or more
child elements that it contains. The concept of containing block is used when
discussing CSS inheritance features.)