CSS Padding property is used to define the space between the element content and the element border.
It is different from CSS margin in the way that CSS margin defines the space around elements. CSS padding is affected by the background colors. It clears an area around the content.
Top, bottom, left and right padding can be changed independently using separate properties. You can also change all properties at once by using shorthand padding property.
| Property | Description |
|---|---|
| padding | It is used to set all the padding properties in one declaration. |
| padding-left | It is used to set left padding of an element. |
| padding-right | It is used to set right padding of an element. |
| padding-top | It is used to set top padding of an element. |
| padding-bottom | It is used to set bottom padding of an element. |
| Value | Description |
|---|---|
| length | It is used to define fixed padding in pt, px, em etc. |
| % | It defines padding in % of containing element. |
See this example:
Output:
This is a paragraph with no specified padding.
This is a paragraph with specified paddings.
