02. The Box Model

Every HTML element creates a box. With CSS, the properties of this box can be manipulated. These are the box’s margins, borders, padding, width and height.

The box model explains how the various properties interrelate. The element itself is enclosed by three settable properties. Padding is closest to the element, the border is between padding and the margin, and the margin is placed around the border. Each of these three has its own properties and all are optional. In some instances, the box properties cannot be set. Most notably, inline elements (such as <a> and <span>) cannot have their widths set (unless their display type is changed via CSS).

Box Model Margin

Margin is the space outside the border and adjacent to other content in the page.

Margin values can be set individually ie:

margin-left: 50px;
margin-right: 150px;
margin-top: 10px;
margin-bottom: 150px;

The same value can be set to all four sides using the shorthand:

margin:10px;

If different values are required for all four sides then the following shorthand can be used:

/* Clockwise from the top left corner */
/* i.e top right bottom left */
margin: 10px 50px 20px 30px;

The same value can be assigned to the top/bottom and left/right using the shorthand:

/* top/bottom left/right */
margin: 10px 50px;

Margin has a special value of auto that can only be applied to left/right margins. When an element has a width value, margin: auto will allocate whatever margin is available evenly between the left and right hand sides – this has the effect of centering the container.

Box Model Padding

Padding is the space inside the border.

As with margin, padding values can be set individually ie:

padding-left: 50px;
padding-right: 150px;
padding-top: 10px;
padding-bottom: 150px;

The same value can be set to all four sides using the shorthand:

padding: 10px;

If different values are required for all four sides then the following shorthand can be used:

/* Clockwise from the top left corner*/
/* i.e. top right bottom left */
padding: 10px 50px 20px 30px;

The same value can be assigned to the top/bottom and left/right using the shorthand:

/* top/bottom left/right */
padding: 10px 50px;

Box Model Border

This is the line drawn around an element and is separated from the element by any padding values set. The border properties are:

• border-width: The width of the border using either a specific value in a specific unit or the relative values thin, medium or thick.
• border-style: The style of the border can be dotted, dashed, solid, groove, ridge, inset, outset or none.
• border-color: The border colour as a hexadecimal or RGB value.
• border-radius: The radius of the border allowing rounded corners.

With exception of border-radius (that has different syntax), the properties can be set specifically for each of the borders by using a rule that specifies the border as left, right, top or bottom. For example:

border-top-style: solid;
border-top-color: #006666;
border-right-style: dotted;
border-right-width: 0.25em;

Again, With exception of border-radius, the most popular way to set a border is with the shorthand border property. This sets the three properties outlined above in one go. The rule can be written using the following syntax:

border: width style colour; 

This shorthand can also be applied to individual sides ie:

border-top: 6pt dotted #FF0000;

Box Model width and height

These values can be set in any valid unit such as pixels or as percentages. When percentages are used the element’s dimensions are relative to any parent container.

Note

The width and height properties are calculated inside any margin, border and padding values – this needs to be taken into account when creating a page layout.

Viewing the Box Model

Experiment with the box model by setting values for the div.container inside of the styles/main.css file.

.container{
    border:4px solid #ffff00;
    margin:50px;
    padding:50px;
}

We’ll use margin:auto to center the div.container.

The width of the container can be set to a fixed width eg:

.container{
    width:1200px;	
    margin:auto;
}

This will give the .container a width of 1200px and centre it in the browser window.

We can also use width values in percentages. Change the .container rule to:

.container{
    width:100%;	
    margin:auto;
}

When using a percentage the container will be fluid and expand or contract within the browser window.

We might want to avoid making it too big or too small. As such we can use properties of min-width and max-width to set lower and upper limits. Amend the .container rule to:

.container{
    width:100%;	
    margin:auto;
    max-width: 1200px;
    min-width: 600px;
}