CSS Margins, Padding & Borders Tutorial
Tags: css, writing, tutorial, beginners
Published: 2022-07-12 04:09:00

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:
![CSS Margin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sldarqesltjffnfeh3n0.png)

#### 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:
![CSS Margin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jwquxsqi0y6dy63f897m.png)
If we use 2 values, the first sets the **top & bottom** margins, and the second the **left & right:**
![CSS Margin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkut6g23kv33j4v2k8ml.png)
Using 3 values applies the first to **top**, the second to **left & right**, the third to **bottom:**
![CSS Margin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7pubd7pf6nlc727adl8w.png)
Using 4 values applies the first to **top**, the second to **right**, the third to **bottom**, the fourth to **left:**
![CSS Margin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ebd5af1glyzpgu4q2j5.png)
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:
![CSS Margin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lwb9cvh0vgmfx5l5m9c2.png)
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.

he 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:
![CSS Padding](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3pmk8yxkcf0faibgn943.png)

#### Padding shorthand
In the same manner as we’d use margin shorthand, we can use `padding` shorthand:
![CSS Padding](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nuxx6c0d7gssa0j9x9cs.png)

### 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.
![CSS Border](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rx33tymfre7h17b3d1gf.png)
Or you could set each edge (Top > Right > Bottom > Left ) separately, like so:
![CSS Border](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q36wuv8fbzoqc2152s38.png)
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:
![CSS Border](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6wedz8v7a67grz1f2a17.png)

#### 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.
![CSS Border](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fgu6g3ekh77nr6addpga.png)
You could also select the color of each edge (Top > Right > Bottom > Left) separately, like so:
![CSS Border](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5sze1b8h1grm83fviqkh.png)

### 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:
![CSS Border](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/thv3sotkvn59jdp5s6ow.png)
For example:
![CSS Border](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ru8tdsv4uszeup5gzyse.png)
This gives us a 5px thick, solid red border around our element.

### Summary
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!

## Conclusion
If you liked this blog post, follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)