# CSS Margins

# **CSS Margins**

Margins are used to create space around elements, outside of any defined borders.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669799926926/kUFv76_xT.png align="left")

# Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:

- `margin-top`
- `margin-right`
- `margin-bottom`
- `margin-left`

Example 1👇
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669800030975/hhxrnu0Ql.png align="left")

Example 2👇
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669800064013/IzYQ4CQaH.png align="left")

**Margin-Shorthand Property**  👇

To shorten the code, it is possible to specify all the margin properties in one property.

Diagram 👇
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669800083390/LViM3AdpD.png align="left")

Example1👇
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669800105828/luVII4FbC.png align="left")

All CSS Margin Properties 👇
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669800129345/UmgENVKkg.png align="left")

# The auto Value

You can set the margin property to `auto` to horizontally center the element within its container.👇

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669800150644/kSaAKBC0U.png align="left")

It is possible to give margins a negative value 👇

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669800172723/a2DGZez3g.png align="left")

# Margin Collapse**👇**

👉 The top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

👉 This does not happen on left and right margins! Only top and bottom margins!

Example👇

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669800215141/JUgy6JMDa.png align="left")

-----------------------------------------------------------------------------------------------
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666336375150/5HqI8zNVh.png align="left")> 
Download our HTML & CSS Visual Treat! ebook Here: 
[Click here](https://codemarch.gumroad.com/l/hxazr)