CSS CONCEPTS

Margin, Border, and Padding

November 30, 2018 by Natalie

In this blog post I will be covering the difference between the CSS properties; margin, border, and padding. These properties can be described using a fundamental concept in CSS known as the box model

Essentially each HTML element can be thought of as a box, and by using CSS we can manipulate how these boxes will be displayed; the box model is an important concept as it allows us to understand the foundation layout and ultimately define the space between elements.

The box model consists of four edges; the margin edge, border edge, padding edge & content edge:

box model display

The above image was sourced from MDN

Hint: you can view the properties of each individual element by navigating to the DOM inspector (If using Chrome on Mac hit command+shift+c or ctrl+shift+c for Windows). Navigate to Styles and your browser will dispay the margin, border, and padding applied to each element, give it go now!

Margin

The margin encases the entire element, and contains the border, padding, and content. It is transparent, and pushes up against other boxes in the layout. It can be used to create space around an element, outside of the border:

  • Shorthand property - margin
  • Individual properties - margin-top, margin-right, margin-bottom, margin-left
Example
Setting the margin individually if the margin has four values:
p .example-one {
    margin-top: 50px;
    margin-right: 80px;
    margin-bottom: 80px;
    margin-left: 100px;
}
To shorten the code above you can set the margin using the shorthand property which is specified clockwise (i.e top, right, bottom, left) this will produce the same result as above:
p .example-two {
    margin: 50px 80px 80px 100px;
}

Border

A border is the area that sits between the outer edge of the padding, and inner edge of the margin, border is the shorthand property which specifies style, width, and color, and allows you to set all four edges at once:

  • Shorthand property - border i.e. border 2px solid red this code would set a 2 pixel solid red border
  • To set the syle, colour, and thickness individually (this applies to all four sides) - border-style, border-color, border-width
  • To set one of three properties, with the sides set individually - border-right-style, border-left-color, border-top-width
Example
Setting the width, style, and colour of all four edges:
p .example-one {
    border-width: 5px;
    border-style: solid;
    border-color: orange;
}
To shorten the code above and if you wish to specify the values to all four edges you can set the border using the shorthand property:
p .example-two {
    border: 5px solid orange;
}
Both example-one and example-two will produce the same result:

WOW this is what a 5 pixel solid orange border looks like!

Padding

Padding is similar to margin and is the area between the outer edge of the content box and the inner edge of the border, this is used to generate space around the content of the element:

  • This layer can be set on all four sides at once using the padding property or one at a time (i.e. using padding-right).
Example
Setting the padding individually if the padding has four values:
div .example-one {
    padding-top: 50px;
    padding-right: 80px;
    padding-bottom: 80px;
    padding-left: 100px;
}
To shorten the code above you can set the padding using the shorthand property which is specified clockwise (i.e top, right, bottom, left):
div .example-two {
    padding: 50px 80px 80px 100px;
}