In this tutorial, we’ll be exploring three important CSS properties to understand when laying out pages: Margins, Padding & Borders.

Margins, Padding & Borders

If you’ve read my previous post on the box model, you’ll know that the values held by the margin, padding & border properties directly effect the size of an elements’ box.

The focus of this tutorial will be how these properties relate to the box model. So make sure you read up on this first!

Now let’s explore these properties in detail.

Margin

The margin property defines the outer portion of the box model, it creates space around an element, outside of any borders. In other words, it’s invisible space around your box, that pushes other elements away from the box.

We can specify our elements’ margins on each side, like so:

margin-top: 10px:
margin-right: 20px;
margin-bottom: 10px
margin-left: 20px;

Margin shorthand

We can also use margin in shorthand form, which allows us to specify multiple margins simultaneously.

Using a single value, we apply that value to all the margins: top, right, bottom, left:

margin: 10px;

If we use 2 values, the first sets the top & bottom margins, and the second the left & right:

margin: 10px 20px;

Using 3 values applies the first to top, the second to left & right, the third to bottom:

margin: 10px 20px 30px;

Using 4 values applies the first to top, the second to right, the third to bottom, the fourth to left:

margin: 10px 20px 30px 0px;

The order to remember is top > right > bottom > left.

margin accepts values in em, rem, or any of the CSS length units. As well as percentage values, and the auto value, which we’ll take a look at now!

Auto & centering

We use auto to tell the browser to automatically define a margin.

It’s often used for horizontal centering, like so:

.element {
  width: 500px;
  margin: 0 auto;
}

With this code our element will be centered horizontally, within the available space. This will work as:

• We’ve specified the element width
• The left and right margins are set to auto

Without a specified width, the auto values would not work. As the available space (from the parent element) couldn’t be determined.

The more modern approach is to use flexbox for centering using justify-content: center;. However, as margin: 0 auto has been used so frequently over the past few years — it’s still good to know, especially when working with legacy code.

Note: auto is useful only for horizontal (not vertical) centering!

Padding

The padding property defines the inner portion of the box model. It creates space around the content of an element, inside of any margins and borders.

We specify our elements’ padding at each side, like so:

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

Padding shorthand

In the same manner as we’d use margin shorthand, we can use padding shorthand:

padding: 10px 20px 30px 0px;

Borders

The border surrounds an element between the padding and margin. We can use it to draw an edge around an element.

We use the properties border-width, border-style & border-color, to define our border.

Border width

border-width: Specifies the border thickness.

p {
  border-width: 2px;
}

Or you could set each edge (Top > Right > Bottom > Left ) separately, like so:

p {
  border-width: 2px 1px 2px 1px;
}

We can also use the following values:

• thin: Equal to 1px
• medium: Equal to 3px
• thick: Equal to 5px

Border style

border-style: Specifies the type of line for our border.

Values we can use are:

• none: The default (displays no border).
• solid: A solid line.
• hidden: A line is drawn, but not visible. Could be used to add some extra width, without displaying a border.
• dashed: A dashed line.
• dotted: A dotted line.
• double: Two straight lines are drawn around the element.
• groove: Displays a border with a carved appearance — that has the effect of making the element look “pressed in” to the page.
• ridge: The opposite of groove, giving a raised effect.
• inset: Makes the element appear embedded.
• outset: The opposite of inset, giving an embossed effect.

Multiple border-style values can be combined. For example:

p {
  border-style: none dashed solid dashed;
}

Border color

border-color : Specifies the color of the border.

Any valid color could be passed to this value. And if you don’t set a color, the border will default to the color of the text in the element.

p {
  border-color: red;
}

You could also select the color of each edge (Top > Right > Bottom > Left) separately, like so:

p {
  border-color: red green yellow blue;
}

Applying borders to specific sides

If we wish to apply properties to individual sides only, we could use:

• border-top
• border-right
• border-bottom
• border-left

And to style each side individually:

• border-top-width
• border-top-style
• border-top-color
• border-right-width
• border-right-style
• border-right-color
• border-bottom-width
• border-bottom-style
• border-bottom-color
• border-left-width
• border-left-style
• border-left-color

Border shorthand

Thankfully you can set these properties all at once! Using the border shorthand. The syntax is like so:

border:  <border-width> <border-style> <color>

For example:

border: 5px solid red;

This gives us a 5px thick, solid red border around our element.

Wrapping up

And there you go! We’ve covered the basics of margins, padding and borders & seen how they fit into the CSS box model. With a solid understanding of these concepts, you’re well on the way to mastering CSS!

Related posts:

• The Box Model
• CSS Units