2018-10-12 15:37:13 -04:00
|
|
|
---
|
|
|
|
title: Adjust the Margin of an Element
|
|
|
|
---
|
2019-07-24 00:59:27 -07:00
|
|
|
# Adjust the Margin of an Element
|
2018-10-12 15:37:13 -04:00
|
|
|
|
2019-07-24 00:59:27 -07:00
|
|
|
---
|
|
|
|
## Problem Explanation
|
2018-10-12 15:37:13 -04:00
|
|
|
Adjusting the `Margin` of an `Element` means to increase or decrease the amount of spacing between the Element's borders and surrounding Elements.
|
|
|
|
|
|
|
|
• Margins are adjusted with positive and negative integers by units of pixels(`px`).
|
|
|
|
|
|
|
|
• Margins can be created from all directions (top, bottom, left, right).
|
|
|
|
|
|
|
|
This is an example of how it is written:
|
|
|
|
```css
|
|
|
|
margin: 20px;
|
|
|
|
```
|
|
|
|
|
|
|
|
You can easily change or adjust the `Margin` of an `Element` by changing the numerical value:
|
|
|
|
|
|
|
|
<b>Before</b>:
|
|
|
|
|
|
|
|
margin: `20`px;
|
|
|
|
|
|
|
|
<b>After</b>:
|
|
|
|
|
|
|
|
margin: `50`px;
|
|
|
|
|
|
|
|
You can also create a custom `class` with a `margin` that you will use repetitively.
|
|
|
|
|
|
|
|
```css
|
|
|
|
.style-margin {
|
|
|
|
margin: 20px;
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
```html
|
|
|
|
<h2 class="style-margin">Example</h2>
|
|
|
|
```
|