Element Spacing
The concept of using a set of nested <div> tags to create a page layout may seem relatively simple on the surface, but unfortunately we have to deal with many real-world variables. We are styling more than simple <div> tags on our pages. And remember as we noted on the previous page, different browser software makers haven't always treated all style declarations consistently.
Some page elements automatically inherit some spacing from the browser. Here is the same example from the previous page with one exception -- instead of plain, unformatted text, the text here is inside a simple <p> tag:
Margin box
Border box
Padding box
Element box - this box contains simple paragraph text.
Note that paragraphs automatically contain extra padding on the top and the bottom, but not on the left and right. Note also that the font face may be different than in the previous example, because this examples uses the <p> font defined in our style sheet, but the previous page uses the browser's default font because it has no formatting or HTML tags wrapped around the text.
Headings, lists, and list items are other common HTML elements in addition to paragraphs that all have some inherent spacing determined by the browser.
When you start applying spacing styles to other elements (such as table cells, rows, columns, or <div> and <span> tags), you may encounter slight differences between different browser software. Understanding the box model is key to troubleshooting these differences. For more information, read this excellent article explaining the box model problem.
For an excellent, detailed explanation of the box model and CSS positioning, read CSS Positioning at brainjar.com.
|
