Layout Spacing
Spacing elements with CSS remains the area of CSS where cross-browser testing is most important. Once you have learned how to identify elements with an id attribute or class attribute, it's relatively simple to apply styles for margin, padding, and borders.
The browser software, on the other hand, sometimes has ideas of it's own when placing space between page elements. At the crux of this is understanding the box model.
The Box Model
Margins and padding (as well as the border of an element) make up the element's Box Model. The Box Model is defined like this:
- in the center you have an element box
- around your element box is it's padding box
- around your element box and your element's padding is the border box
- the margin box contains everything and is outside the element's border
To visually represent this:
Margin box
Border box
Padding box
Element box - this box contains simple non-paragraph text.
You don't have to use all the 'boxes' but it can be helpful to remember that the box model can be applied to every element on the page.
Before moving on to the next page, take a close look at the above example and remember the text in the element box has no formatting applied to it (ie: no <p> tag).
|
