Learn CSS – Part 6: Box Model

In the HTML Tags – Part 5: The Table Tag, I showed how a cell within a table can have space and padding inside by using the cellspacing and cellpadding attributes. This article will demonstrate that every element, be it a paragraph tag <p>, HTML Tags – Part 1: The Structural Elements, or the DIVider tag <div>, Learn CSS Part 2: Other Ways to Write CSS, is enclosed inside their own “box” and have the ability to separate itself from the other elements within the document so that it reads better.

Learn CSS: The Box Model

Learn CSS – Part 6: The Box Model

Below is a graphic showing how a box model looks and the order it should be read when using CSS properties to add presentational values. This box is not visible but can be if the border property is used.

The Box Model Design

Learn CSS – Part 6: The Box Model – Border Property

The border property will add a line or border around an element by adding thickness to the border, determine how the border should look when added, and colorizing it once added. There are five properties in all:

border-top: 2px solid #F00;

border-right: 3px dotted #F00;

border-bottom: 2px dashed #F00;

border-left: 4px double #F00;

border: 4px groove #F00;

Using the last line will add a 4 pixel, red line with a groove edge around an element. The top four lines could be added one at a time. The hexadecimal value, #F00, is the preferred method instead of using the actual name of a color. Here’s how the top four examples above looks:

The Box Model: Various Border Properties

Learn CSS – Part 6: The Box Model – Margin and Padding Properties

Adding the border property will help show the box model that an element is in. If you use this and add the margin and padding properties, then you will see how your content can be shifted and adjusted on the page.

Margin Property

Going back to the background-position from the HTML Tags – Part 4: The HTML Image Tag article, it is possible to reposition an element on the page using the words left, right, top, center, and bottom. The margin property uses pixels as a way of shifting your content up, down, left, and right. Here are the variations of how it can be written:

margin-top: 5px;

margin-right: 10px;

margin-bottom: 15px;

margin-left: 20px;

The Box Model: Margin Property

You can also combine them all into one to decrease the clutter in your code by writing the values in the following order (top, right, bottom, left):

margin: 5px 10px 15px 20px;

If you want to use the same number for the top and bottom positions and a different number for the left and right positions, you can write them this way:

margin: 20px 30px;

Another way to write your margins is to have a value for the top, the same value for the right and left, and a different value for the bottom (top, right/left, bottom):

margin: 5px 30px 15px;

And the last way is to have the same value for all four positions:

margin: 20px;

Using the margin property comes in handy when you need to work on cross-browser compatibility. You may have to use 15px for the margin-top in Internet Explorer instead of the 20px value for Firefox because it looks off. You’ll become quite familiar with this property as you continue to fine tune your web coding skills.

Padding Property

Creating a cushion within your box model requires the padding property. Space is added between the content and the border of your box model.

Similar to the margin property, you’ll write your padding property code according to the image presented in the Box Model section above. Here are the different ways to write the padding property:

padding-top: 5px;

padding-right: 10px;

padding-bottom: 2px;

padding-left: 8px;

The Box Model: Padding Property

You can merge them together into one line:

padding: 5px 10px 2px 8px;

The top and bottom positions can have one value, and the left and right positions can have the same value:

padding: 7px 18px;

Another method for writing your padding code is to have a value for the top, the same value for left and right, and a value for the bottom:

padding: 5px 18px 2px;

The final method for writing the padding property is to have the same value for all four positions into one:

padding: 20px;

It took me some time to really figure this out but with practice you’ll get the hang of it in no time.

Your Thoughts On Learning CSS

As I wrap up this article, I want get your thoughts…

What questions do you have about the box model? What creative ways would you use border property? Leave a comment on my Facebook Page.