CSS padding
In CSS we are also having the properties of spacing around elements content , inside from defined borders
bu using the padding property. And these properties we can set to the following sides:-
- padding-top
- padding-right
- padding-bottom
- padding-left
Values we can implement here in padding properties:-
- inherit: here padding been inherit from it's parent element.
- %: padding we can specify in form of %.
- length :specify length(in pt px cm etc.)
Let's understand this by the following program :-
<!DOCTYPE html>
<html>
<head>
<style>
p{ background-color:red;
padding-top:10px;
padding-right:5px;
padding-bottom:15px;
padding-left:20px;
}
</style>
</head>
<body>
<p> I am Manish </p>
<p> Hey I love India </p>
</body>
</html>
Output of the Program
I am Manish
Hey I love India
Padding (shorthand)
This allows you to take the space inside from the defined borders .
Order of writing padding shorthand property
- padding-top
- padding-right
- padding-bottom
- padding-left
And the same above order we have to follow if we want to use padding shorthand property, we can also omit the properties if we
want but the order than also remains the same .
Let's understand this by the following program
<!DOCTYPE html>
<html>
<head>
<style>
.red{background-color: green;
padding: 10px 20px 35px 20px;
}
</style>
</head>
<body>
<p> I am Manish </p>
<p class="red"> Hey I love India </p>
</body>
</html>
Output of the Program
I am Manish
Hey I love India
So we get the padding-top, padding-right, padding-bottom and padding-left by specifying these
properties in single line.
Let's talk about all padding-properties
| Property | Description |
| padding | A shorthand property for setting the padding properties in one declaration |
| padding-bottom | Sets the bottom padding of an element |
| padding-left | Sets the left padding of an element |
| padding-right | Sets the right padding of an element |
| padding-top | Sets the top padding of an element |
