The Box Model
The box model represents the way that margins, paddings, and borders are displayed with (x)html and css. A strong understanding of the box model is necessary for us to be able to start really stylizing our pages.
Before we begin, here is what we will create by the end of this lesson. See the example.
To understand the box model, lets take a look at this image below, which comes from here @ mandalatv.net.
There are three important components css properties to the box model:
- width
- padding
- border
- margin
Lets define what each of these mean
- width: The width of the class or id measured in pixels, percentage, or em.
- padding: This determines the amount of space between the border and the content inside.
- border: This determines the border around the width. The values go in the order of border-width, border-color, border-style.
- margin:The margin is the distance between the outside of the border and other content.
Take a look at this example. See the distance between the two boxes? That is the margin. The distance between the big blue border and the text is the padding.
In the css, the width of the #box is set to 200px. However, the actual size is much bigger. To find out the true width (or height) of a box we need to add up the width, the border, and the padding.
Here is what the css for the id box looks like:
box {
width: 200px;
margin: 20px;
padding: 20px;
border: 5px #D8F078 solid;
background: #fff;
}
To determine the true width of the box we need to add up the width, padding-left, padding-right, border-left, border-right. Can you figure out what it is? That's right! 250px!
Okay, lets work with what we have done so far... Lets try making our own boxes with padding, borders, and margins. Your boxes will not float next to each other yet... We will get to that later.
One last trick we will learn has to do with margins and centering our boxes in the middle of a page. Let's say that you want to create a box in the middle of a page, such as this example. The technique used to center this box is the same one that is used to center countless web pages, such as espn.com. Learning how to do this will let us move on to creating even more stylish sites.
Here is how it works. When we work with the css property margin, we can assign four values to it:
margin-topmargin-rightmargin-bottommargin-left
We can either assign each of these one by one, such as in this example:
box {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
}
Or we can right it much more simply as this:
box {
margin: 5px 10px 5px 10px;
}
The order goes top, right, bottom, left. A shortcut can be used if the top and bottom values are the same and the right and left values are the same. In the example above, this is the case. The top and bottom margins are both 5 and the right and left margins are both 10. When this is the case, we can write the margins like this:
box {
margin: 5px 10px;
}
Now, try assigning your box this margin and see what happens?
box {
margin: 5px auto;
}
Why does this happen? Because the right and left margins are automatically setting themselves to be the same distance from the sides of the browser. Now your box should be centered just like this one.
Congrats! You have just greatly increase your css skills and begun using css to define layouts. In the next installment we will learn how to use floats and clears to create a page like this.
