|
|
CSS Box Model |
The Box Model in style sheets refers to how certain tags separate out their contents as though they were in a "box" of their own, such as the table, p, and div tags. These tags are each considered to have specific parts to their layout, called the margin, border, and padding. Style sheets can set the properties of these areas as a whole (i.e.: the entire border) or in parts (i.e.: just the margin on top, or the padding below the contents.)
The margin is space reserved as empty outside of the tag, and surrounding it, like the blank space left above and below a p tag. The margin of a tag is invisible, and aside from how much space it takes up, you can not set anything about it's appearance, as it merely reflects the ordinary background in that area of the page from outside of the tag. It should be noted that margins can overlap each other. For example, the p tag sets by default a margin on top and below the paragraph of 1em (the height of one line of text), and if a table or image is set above or below that paragraph, it will be that far away from it's edge. However, if you place two paragraphs in a row, their margins will overlap - the margin defines the minimum distance between the border of the current tag (which it is set on) and the border of any other tag which may be near it. If two tags next to each other have different margins, the larger of the two will be used to set the space between them.
You can set the margin values of a tag to be different for each side of the tag, or set the same margin all of the way around the tag, like this:
It's important to remember that when two tags are next to each other (or above/below each other), their margins will overlap, and the larger of the two margins will be used. Thus, the aggressive tag from the example would still be forced to be 100 pixels away from the shy tag, despite it's 0 pixel margin, and two shy tags next to each other would still have only 100 pixels between them, not 200 as you would get from adding the two together.
The padding property of the tag defines the distance between the border of the tag, and any actual content that may be inside of it. (Images, text, other tags, etc.) As with the margin, the only thing you can control about the padding is the actual distance used for it - it is considered to be "invisible", and the normal background inside of the tag will show through it.
Like the margin, the padding of a tag can be controlled as a whole, or separately based on direction, by adding -top, -left, -bottom, and -right to the padding attribute, like so:
Note that unlike the margin, the padding of the tag is inside of the border of the tag - this means that if you had two shy tags (assuming a margin of zero this time) next to each other, their contents would each be 100 pixels away from their borders, which would be touching, and thus the tag contents would be 200 pixels away from each other. If we applied both the padding AND margin for the "shy" tag, the total distance would climb to 300 pixels, as the borders stayed 100 pixels away from each other, and the text inside of the tag was a further 100 pixels past that. This becomes much more visible if you have a visible border on the tags in question.
The border is like a wall separating the inside of the tag from everything outside of it - if the tag has a background color or image set on it, it will stop at the border of the tag. Tags next to each other with no margin will stop against each other's borders.
The border is the most dynamic and configurable aspect of the box model, as not only can you set the width of the border, but you can also make it visible or invisible, set colors, styles, and even various sizes of rounded corners for it as well, using the border-color, border-style, and border-radius properties, and as with margin and padding, it can be different based on the direction of the border. An example of borders being set on a tag using all of the available properties might look like this:
Here are the two boxes created by that:
The border-style values that can be used for borders should come from the following set: (Note that each list item uses the border style it describes, in a 3 pixel wide, red border, except where they are invisible.)
Last, the new CSS 3 property, border-radius can only be used in the more recent browser releases. Some older browsers had "draft" support for it using special prefixes (ie: -moz-border-radius: in firefox, and -webkit-border-radius: in safari), but these will not validate as actual CSS 3 properties. To use border-radius, you must supply four pixel values, representing each of the four corners of the box, starting at the top-left, and moving in clockwise direction as below:
Unlike the properties involving colors, backgrounds, and font sizes, the box properties in style sheets are not passed down to the tags inside of them. This is very important, otherwise if you wanted to have a border around a paragraph, the border would also appear around any formatting tags inside of the paragraph, such as the bold or italic tags. If you want borders, margins, or padding to be set on the things inside of a tag with a visible border on it, you must set the borders on those things separately!
Anyone who has worked with tables will know that the default appearance of a table in the web browser is not always desirable - especially since it always includes a gap between the borders on individual table cells. In HTML 4, you added a cellspacing="0" attribute to the table tag to prevent this. In XHTML and HTML 5, you should do this with style sheets. The CSS attribute to do this is called "border-collapse". Here's an example of how it would look:
| normal table | not collapsed |
| normal table | not collapsed |
| collapsed table | no gaps |
| collapsed table | no gaps |