The CSS Box Model
Before we continue with lessons on margins, padding, borders, etc., it is important to grasp the concept of the box model. A box (or block) will have four sides: top, right, bottom, and left. Many HTML tags are considered block elements, meaning that they are a type of box with the same four sides.
Above is an example of a box with each different color area showing the different regions that can be formatted.
Each block level tag has four sides that can be specified in order going clockwise beginning at the top. Every box element can have a width and height defined, as well as a margin, border, and padding to all four sides.
Width and height properties accept a length value, a percentage value, or auto (which leaves the dimensions up to the browser.) An example is as follows:
.myarea {
width: 300px;
height: 100px; }
Below is a list of common block-level HTML tag pairs:
<blockquote> ...</blockquote>
<body> ... </body>
<button> ... </button>
<div> ... </div>
<dl> ... </dl>
<fieldset> ... </fieldset>
<form> ... </form>
<h1> ... </h1>
<h2> ... </h2>
<h3> ... </h3>
<h4> ... </h4>
<h5> ... </h5>
<h6> ... </h6>
<head> ... </head>
<html> ... </html>
<iframe> ... </iframe>
<img />
<layer> ... </layer>
<legend> ... </legend>
<ol> ... </ol>
<p> ... </p>
<select> ... </select>
<table> ... </table>
<ul> ... </ul>
A block-level element may contain other block-level elements, or it may contain inline elements. But inline elements cannot contain block-level elements, only data or other inline elements. So a block-level element is "bigger" or "higher" in the hierarchy. It defines a larger section of of the page than an inline element does.
Block-level elements generally begin on new lines. In practice, most browsers insert a blank line between any two block-level elements. So if you have a paragraph (block-level), and you end that paragraph and begin another paragraph, there will be blank line between them. Same thing between a header and a paragraph, between two headers, between a paragraph and a list, between a list and a table, etc. This is a useful clue as to what a block-level element is.
Inline elements do not start on a new line. If you type out a paragraph, and decide to make one of the words italic, does the browser jump down a line for the italic word? No, it doesn't and this is a clue as well. The italic tag is an inline tag. So is bold, strong, em, a href, etc. None of these tags causes the browser to start a new line, so these are all inline elements.
Do the Math
If you are wondering why this discussion on block-level
elements is important, you will understand after reading through this example:
Assume that you have purchased one of my templates and the page layout is contained within a <div> called "wrapper". This div is set to a width of 900 pixels. A div is a block-level element.
Inside of this wrapper are two other divs, one for the sidebar and one for the content. You need for the sidebar to be just a bit narrower and the content to be a bit wider. How do you make this change?
Here's a peek inside the CSS file (don't worry if you don't understand it all at this point):
#wrapper {
width: 900px;
text-align: left;
margin: 0 auto;}
#sidebar {
font-size: 85%;
float: left;
width: 270px;
padding: 10px 30px 0 0;}
#content {
float: right;
width: 600px;
line-height: 1.5em;
padding: 10px 0 0 0;}
The sidebar has a width of 270 pixels and the content has a width of 600 pixels. For the math wizards, you will see that this does not add up to 900 pixels! It's only 870 pixels.
Now look at the padding values and you will see there are pixel values. Remember that values are listed clockwise starting at the top. All you are concerned about are values affecting the width.
The sidebar has a 30 pixel value added to the right side. Add this 30 pixel value to the sidebar's width and you have 300 pixels. The content has no values added for the left and right sides, so its total width is still 600 pixels.
Add the two together and you come up with 900 pixels that exactly matches the 900 pixel width of the wrapper. It's a perfect fit.
To change both the sidebar and content div width, make adjustments so that all width values still equal 900 pixels.