freeCodeCamp/guide/english/certifications/responsive-web-design/basic-css/add-different-padding-to-ea.../index.md

35 lines
720 B
Markdown
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

---
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;
}
```