CSS PADDING
The CSS padding property is used to create space around the element's content.
This paragraph has padding of 50px from border and 20px padding inside element.Unlike margin property padding property generate space only for content.
Using padding property we can specify top,bottom,left and right padding independently.These are following padding properties.
CSS padding properties
| Property | Description |
|---|---|
| padding | This sets all the value of padding. |
| padding-top | It sets the top padding of the element. |
| padding-right | It sets the right padding of the element. |
| padding-bottom | It set bottom padding of the element. |
| padding-left | It set left padding of the element. |
CSS padding values
| Values | Description |
|---|---|
| length | It set padding in px,pt,cm etc. |
| % | It set padding using the percentage of the container. |
Setting padding to element
Specifying CSS padding property and its value we can create padding over the element.
<p style="padding:none;">This paragraph has no padding.</p>
<p style="padding:25px">This has a padding of 25px.</p>Set different padding
We can specify different margin values to different side of the elements by using
- padding-top
- padding-right
- padding-bottom
- padding-left
.set_padding{
padding-top:50px;
padding-right:30px;
padding-bottom:30px;
padding-left:25px;
}CSS padding shorthand
Padding shorthand property is used to specify different padding to different side of element using just one attribute padding.Example : padding : 20px 30px 40px 50px
The values in shorthand padding are set anticlockwise starting from top=20px,right=30px,bottom=40px and ends at left=50px.
.shorthand{
padding: 20px 30px 40px 50px;
}