<h1 id="heading-css-padding"><strong>CSS Padding</strong></h1>
<p> property is used to define the space between the element content and the element border.
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1669611874995/AM-ZqZq4L.png" alt="image.png" /></p>
<p><iframe src="https://giphy.com/embed/ZY3W96Mvat8EFTCclA" width="480" height="480" class="giphy-embed"></iframe></p><p><a href="https://giphy.com/gifs/css-html-web-designer-quotes-ZY3W96Mvat8EFTCclA">via GIPHY</a></p><p></p>
<h2 id="heading-padding-individual-sides"><strong>Padding - Individual Sides</strong> 👇</h2>
<p>CSS has properties for specifying the padding for each side of an element:</p>
<ul>
<li><code>padding-top</code></li>
<li><code>padding-right</code></li>
<li><code>padding-bottom</code></li>
<li><code>padding-left</code></li>
</ul>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1669611899013/i41Vw4c8-.png" alt="image.png" /></p>
<p><strong>All CSS Padding Properties</strong>👇</p>
<p>Definition👇
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1669611920378/Sx7qOiQfw.png" alt="image.png" /></p>
<p>Diagram 👇
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1669611941213/2oW8tan4h.png" alt="image.png" /></p>
<p>Example👇
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1669611961623/CKD9PecMe.png" alt="image.png" /></p>
<p>Padding - Shorthand Property👇 </p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1669611983810/jiyBhCK0t.png" alt="image.png" /></p>
<hr />
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1666336375150/5HqI8zNVh.png" alt="image.png" />&gt; 
Download our HTML &amp; CSS Visual Treat! ebook Here: 
<a target="_blank" href="https://codemarch.gumroad.com/l/hxazr">Click here</a></p>


# **CSS Padding**

 property is used to define the space between the element content and the element border.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669611874995/AM-ZqZq4L.png align="left")

<iframe src="https://giphy.com/embed/ZY3W96Mvat8EFTCclA" width="480" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/css-html-web-designer-quotes-ZY3W96Mvat8EFTCclA">via GIPHY</a></p>

## **Padding - Individual Sides** 👇

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

- `padding-top`
- `padding-right`
- `padding-bottom`
- `padding-left`

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

**All CSS Padding Properties**👇

Definition👇
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669611920378/Sx7qOiQfw.png align="left")

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

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

Padding - Shorthand Property👇 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669611983810/jiyBhCK0t.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)



CSS Padding

Table of contents

CSS Padding

Padding - Individual Sides 👇