Web Design and Web Development Help

The Box Model

For the following CSS properties that we will discuss we need to learn a bit about the box model. When we talk about the box model we talk about the four sides of a rectangle. The top, right, bottom and left in that order. Eric Meyer’s coined the term TRouBLe to help remember this specific order.

Values can be assigned to 1, 2, 3 or 4 sides. Depending on how many values you specify will determine what sides of the box model the value effects.
If you specify only one value, it affects all sides. ie - margin: 4px;
If you specify two values, it affects, a) top and bottom b) right and left. ie. margin: 4px 3px;
If you specify three values it affects a) top b) right and left c) bottom. ie. margin: 1px 2px 3px;
If you specify 4 values it affects a) top b) right c) bottom and d) left. ie. margin: 1px 2px 3px 4px;

Border-width

Let’s zoom in a little more closely to each border property to see how each works independently and how we can shorten each property.

The “border-width” property has four sides to it and the order to code follows the box model. You can style from 1 to 4 sides separately. The “border-width” properties go in order of top, right, bottom and finally left.

h1 {

    border-top-width: 1px;

    border-right-width: 2px;

    border-bottom-width:2px;

    border-left-width: 1px;

}

This can be shortened to:

h1 { border-width: 1px 2px 2px 1px; }

Border-style

“Border-style” refers to the type of line you want to surround an element. The “border-style” property has four sides so refer to the box model definition above.

#navigation {

    border-top-style: solid;

    border-right-style: solid;

    border-bottom-style: solid;

    border-left-style: solid;

}

Can be shortened to:

#navigation { border-style: solid; }

This code sets all four sides to a solid border.

Border-color

“Border-color” refers to the color of the lines around an element. This property follows the box model.

.image{

    border-top-color: red;

    border-right-color: red;

    border-bottom-color: red;

    border-left-color: red;

}

Shortened the CSS looks like:

.image { border-color: red; }

I’m not going to explain styling other sides independently because I think you probably understand how to do that by now.

Margin

The “margin” property is shorthand for “margin-top”, “margin-right”, “margin-bottom”, “margin-left”. The “margin” property follows the box model so keep that in mind when assigning a value.

h2 {

    margin-top: 10px;

    margin-right: 10px;

    margin-bottom: 10px;

    margin-left: 10px;

}

Can be shortened to:

h2 { margin: 10px; }

Because margins have four sides, you can style from 1 to 4 sides.

Padding

“Padding” is shorthand for “padding-top”, “padding-right”, “padding-bottom”, “padding-left”. “Padding” follows the box model and you can style padding from 1 to 4 sides. Padding follows exactly the same procedure as margin.

Now that you have learned about CSS Shorthand, enjoy practicing it and watching your CSS shrink in front of your eyes!

Pages: 1 2