Margin, Padding, And The Box Model

CSS Spacing properties

Previous CSS styles we have covered include properties called margin and padding:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #252525;
    background-color: #f8f8f8;
}

Both of these relate to adding space to a HTML element, but in a slightly different way.

The margin property

When setting the margin as in the above example, we are setting the outside spacing on all four sides of the selected element. Take a look at the following example:

Zero margin

10px margin

This is generated using the following HTML:

<p style="background-color: #2d877d; margin: 0;">Zero margin</p>
<p style="background-color: red; margin: 10px;">10px margin</p>

The first element has margin: 0; set and the second has 10 pixels added using margin: 10px;. The 10 pixels of spacing are visible on the outside of the element.

Browsers often have default margin and padding values set, this example overrides any defaults by setting the values directly.

The padding property

Changing this example to use padding will create the spacing inside the element:

Zero padding

10px padding

This is generating using the following HTML:

<p style="background-color: #2d877d; padding: 0;">Zero padding</p>
<p style="background-color: red; padding: 10px;">10px padding</p>

The spacing is created inside the element, between the content (text) and the outside (border). This is highlighted by the background color. Both margin and padding can be used on the same element.

Selecting sides

Both margin and padding are shorthand value to apply to all four sides.

Any of the above properties can be used to apply spacing to one side of an element. Other shorthand uses include using two values to group the top/bottom and the left/right values:

<p style="background-color: red; padding: 3% 10%;">3% padding top/bottom ~ 10% left/right</p>

3% padding top/bottom ~ 10% left/right

And the same example but using margin:

3% margin top/bottom ~ 10% left/right

The CSS box model

An important concept to understand with CSS is the box model. This describes the box which surrounds an element when appyling CSS. In the examples above, spacing is added as a box around elements. Understanding the box model is important to set the width and height of an element correctly.

<section
    style="width: 100px; height: 100px; background-color: aqua"
></section>

This element is displayed at a size of 100px x 100px:

Let's add a second box, this time with padding:10px;:

<!-- first box -->
<section
    style="width: 100px; height: 100px; background-color: aqua"
></section>
<!-- second box -->
<section
    style="width: 100px; height: 100px; padding:10px; background-color: aqua"
></section>

Even with both boxes set to be 100px in height and width they are different sizes. The second box is displayed as 120px x 120px. This is because 10px of padding is added to all four sizes, and added to the overall element size.

What about margin? This example uses the same elements but replacing padding with margin on the second box:

<!-- first box -->
<section
    style="width: 100px; height: 100px; background-color: aqua;"
></section>
<!-- second box -->
<section
    style="width: 100px; height: 100px; margin:10px; background-color: aqua;"
></section>

The overall size of the element remains at 100px x 100px for both boxes. The margin has added the spacing to the outside of the second box, but will not affect the overall size.

Another consideration is the border property, added to the second box:

<!-- first box -->
<section
    style="width: 100px; height: 100px; background-color: aqua;"
></section>
<!-- second box -->
<section
    style="border: 10px solid red; width: 100px; height: 100px; background-color: aqua;"
></section>

Notice how the border property has expanded the size of the second box, making it 120px x 120px. As with the padding this border is also a shorthand, and added to all four sides. The value of 10px solid red sets the border-width, border-style. and border-color properties.

To recap, the size of an element is calculated by including the elements content box (height, width), any padding, and also the border. These 'boxes' when added to an element are referred to as the box-model. Any margin is applied outside the element and will not affect the element size. Understanding this will allow us to properly size our elements.

Box model examples

Using the box-sizing property

The box-sizing property is also available to help with sizing elements:

• box-sizing: content-box;: This is the default CSS sizing as in the above examples. The height and width values will be applied to the content box, and any padding and borders will be added to this.
• box-sizing: border-box;: Used to deduct any additional border and padding values from the content box. Resulting in the element displayed the size it was set to.

Now with box-sizing: border-box; added to the second box, both elements are the same size:

<!-- first box -->
<section
    style="width: 100px; height: 100px; background-color: aqua;"
></section>
<!-- second box -->
<section
    style="box-sizing: border-box;  border: 10px solid red; width: 100px; height: 100px; background-color: aqua;"
></section>

This has deducted the border value from the height and width (content-box). Both boxes now display as 100px x 100px.