CSS 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.

What do we mean by HTML element?  <p> is a HTML tag but <p>Hello World</p> is a HTML element.   A simple paragraph has a box around it and is known as a ‘block level’ element as it includes line breaks above and below its content.  Although the box is already there, a simple <p>Hello World<p> does not display the box.  To see the box properties we need to apply some HTML rules.

Some of the common block level HTML tags include

  • <div>
  • <h1> to <h6>
  • <hr>
  • <ol>
  • <p>
  • <table>
  • <ul>

The defining feature of a block level element is that it has line breaks above and below it.  The box that is around a block element therefore extends across the full width of the document.

The Box Model

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 have their own properties and all are optional.

CSS Box Model

The width and height of the element can also be set.  The 0,0 axis or origin used to position the box is reference to the top left hand corner of the element.

The box properties of an element CANNOT be inherited by child elements as font and text elements are.  If nested they can however influence each other ie an element’s margin will influence the placement of any child element’s box.

Consider the simple HTML element below:

<p>This is a boxed element</p>

It can be formatted with the following rules:

p {
    margin: 20px;
    padding: 10px;
    border: 4px solid #0000FF;
}

As a result the page will appear as follows:

This is the 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’, ‘meduim’ 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

Borders can be set specifically for each of the properties by using a rule that specifies the border as either ‘left’, ‘right’, ‘top’ or ‘bottom’.  For example:

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

There is also a 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;

For example:

p{
     border: 6pt dotted #FF0000;
}

The border can be used to place a border around an entire page by adding a rule using the BODY selector.  For example the following:

body{
      border: 1px solid #99CC00;
}


Box Padding

This is the space between the content of the element and the border.  Padding has the following properties each of which are set using the same values outlined in our discussion of font ie em, pixels, pts etc.  The properties ‘padding-left’, ‘padding-right’, ‘padding-top’ and ‘padding-bottom’ are self explanatory.  You can also use the shorthand padding property such that:

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

Can be shortened to:

padding: 10px;

The shorthand can be used to set all four values differently. The values are allocated clockwise, first value is top, second value is right, third value is bottom and fourth value left.

padding: 10px 5px 15px 20px;

Finally the shorthand can be used to just apply the same value to top/bottom and left/right. The first value is top/bottom and second value left/right.

padding: 10px 5px;

Note: Padding cannot be inherited by other elements..


Margin

The margin is the space around the box border.  The margin is very similar to padding but appears on the outside of any existing border setting.  Like ‘padding’ the margin property takes numeric values and can be applied to all four margins at once or each margin in turn.  To set all four margins to the same value use the following:

margin: 5px;

Individually margins can be set as follows:

margin-top: 10px;
margin-bottom: 5px;
margin-left: 2px;
margin-right: 8px;

Alternatively a shorthand can be used to set different values to each of the margins.  To do so place four values after the margin separated by spaces.  These four values set the top, right, bottom and left margins respectively.

margin: 10px 8px 5px 2px

Tip: To remember the top, right, bottom and left order the margins are set in this shorthand technique, it is useful to think of the margins been set in a clockwise fashion.

Margin: auto

When margin is given the value “auto” it means: “as much as you need.”

The <div> takes as much margin as it needs and equally divides it between left and right. As a result this technique can be used for centering elements.


Box Dimensions

The width and height properties can be applied to any box.  Both properties accept numeric values as outlined for the other box properties.

When using a percentage value if a box is nested inside another the percentage is based on the parent not the document width/height.  

Example:

.box{
      width:400px;
      height: 120px;
}

Leave a Reply

*