The Box Model

The box model is a way to visualize the space taken up by an element on a page. It involves 4 main properties:

1. The content: This is content of the element (text, other elements, images, etc.)

2. The padding: This is the space between the content and each border

3. The border: This is the, uh, border around the element

4. The margin: This is the space outside the border of the element separating it from other elements

The padding, border and margin can have individual properties on each side (top, left, bottom and right).

The Browser Inspector allows you to visualise the Box Model of a selected element on the page. An example is below:

We can see the "Google Search" button element selected, and its box model shows its properties. They can be listed as below:

• The button's content is ≈94 pixels wide and 34 pixels high

• The button has a 1 pixel thick border all around

• The button has no padding on its top and bottom but has 16 pixels of padding on its left and right

• The button has a 11 pixel margin above and below it, and a 4 pixel margin to its left and right

In CSS, border, margin and padding are all properties that can be assigned to any element and given a valid measurement value. There are additional directional properties for each of these to give specific measurements for a specific side.

Below you can see how each of these are used in CSS.

Border

Property usage: border: type thickness color;

• type can take on one of the following values: solid, none, dashed, dotted, double, groove, ridge, inset, outset or hidden

• thickness can take on any valid measurement as we saw in the previous section

• color can take on any valid color value

To style different sides differently, you can use one of the following properties:

• border-top - the top border

• border-bottom - the bottom border

• border-right - the right border

• border-left - you can figure this one out

The type, thickness and color can also be separated out by using different properties:

• border-style - the type of border

• border-width - thickness of the border

• border-color - color of the border

These can again be separated into the directions:

• border-top-style, border-bottom-style, border-right-style, border-left-style

• border-top-width, border-bottom-width, border-right-width, border-left-width

• border-top-color, border-bottom-color, border-right-color, border-left-color

Padding

Property usage 1: padding: value;

This assigns the same padding on all 4 sides.

Property usage 2: padding: top right bottom left;

This takes 4 measurements, separated by spaces, and assigns them in clockwise order.

Individual sides can get different paddings in by using either padding-top, padding-bottom, padding-right or padding-left.

Margin

Property usage 1: margin: value;

This assigns the same margin on all 4 sides.

Property usage 2: margin: top right bottom left;

This takes 4 measurements, separated by spaces, and assigns them in clockwise order.

Individual sides can get different margins in by using either margin-top, margin-bottom, margin-right or margin-left.

Next steps

Next, we'll finally begin to add some CSS to our html document using all the knowledge from these past 4 articles.