Css Padding
Use the padding property to give space to an element or space between two elements in a web page. An element is given padding from top, right, bottom, and left, giving its value in px, cm, em, etc. The padding property is as follows -
CSS Padding Properties
|
Property |
Description |
|
padding |
The element is given padding space from left, right, top, bottom together. |
|
padding-left |
Use this to give padding space from left to element. |
|
padding-right |
Let's use this to give padding space from right to element. |
|
padding-top |
Use this to give padding space from the top to the element. |
|
padding-bottom |
Use this to give padding space from the bottom to the element. |
1 padding property
Giving a value to this property applies padding space to the top, right, bottom, and all of these elements simultaneously, to give different padding space to all of this property, 4 values are given respectively, Applies to Right, Bottom, and Left, can give its value in px, auto cm, em, etc.
It works like a margin property, there is a difference between the two outside the margin element while the padding is used to give space inside the element.
Example 1
|
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div style="background-color:gray;"> <p style="padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px;">This is a paragraph</p> </div> <hr> </body> </html> |
Output
2 padding - top
The element displayed in the web page uses it to give padding space from the top, its value is given in px, cm, em, etc.
3 padding - right
The element displayed in the web page uses it to give padding space from right to right, its value is given in px, cm, em, etc.
4 padding – bottom
The element displayed in the web page uses it to give padding space from the bottom, its value is given in px, cm, em, etc.
5 padding – left
The element displayed in the web page uses it to give padding space from left to left, its value is given in px, cm, em, etc.
6 Shorthand property
Note: - All these have been read in the topic margin chapter, read the margin chapter.
