CSS Padding

The CSS Padding property is used to define the space between the content and the border of the element. It clears an area around the content unlike margins which clears the area around the element.

You can change the padding of an element one by one for each side or can give all at once using shorthand property.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Padding </title>
<meta charset="UTF-8">
</head>
<style>
p{
border: 1px solid black;
background-color: #a78f3d;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<p>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px,
and a left padding of 80px.</p>
</body>
</html>

Output

CSS Padding Examples

This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.

CSS Padding Shorthand Properties

If four values are given:	If three values are given:
padding: 25px 50px 75px 100px;	padding: 25px 50px 75px;
top padding is 25px	top padding is 25px
right padding is 50px	left and right paddings are 50px
bottom padding is 75px	bottom padding is 75px
left padding is 100px

If two values are given:	If one value are given:
padding: 25px 50px;	padding: 25px;
top and bottom paddings are 25px	all four paddings are 25px
left and right paddings are 50px

Recommended :

1 . How to use Syntax in CSS ?
2 . What is an HTML Tag?
3 . How to use label in HTML
4 . Learn CSS Padding

5 . CSS beautiful buttons
6 . How to use animation in CSS
7 . Create Youtube Thumbnail Generater in PHP
8 . Create Bootstrap 4 Spinner

Web Developement Courses
BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors