35 lines
720 B
Markdown
35 lines
720 B
Markdown
|
---
|
|||
|
|
title: Add Different Padding to Each Side of an Element
|
|||
|
|
---
|
|||
|
|
## Add Different Padding to Each Side of an Element
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
|||
|
|
|
|||
|
|
To adjust the padding of an element use:
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
.example {
|
|||
|
|
padding: 10px;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
To specify padding sizes on an element by individual sides we can use ‘padding-top’, ‘padding-right’, ‘padding-bottom’, and ‘padding-left’. We can use any of these in combination and in any order. For example:
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
.example {
|
|||
|
|
padding-top: 5px;
|
|||
|
|
padding-bottom: 0px;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Or:
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
.example {
|
|||
|
|
padding-top: 20px;
|
|||
|
|
padding-left: 25px;
|
|||
|
|
padding-right: 5px;
|
|||
|
|
}
|
|||
|
|
```
|