CSS Padding
CSS padding is used to specify space around an element's content, inside of any defined borders.
CSS padding can be changed independently using separate properties like top, bottom, left and right directions. You can also change all properties at once by using shorthand padding property.
Padding Shorthand Property
The padding property is a shorthand property for the following individual padding properties:
- padding-top: Specifies the top padding of an element.
- padding-right: Specifies the right padding of an element.
- padding-bottom: Specifies the bottom padding of an element.
- padding-left: Specifies the left padding of an element.
CSS Padding: Example
Output
Hello! This is Text Paragraph with padding property.
Padding Side Values
- length: Define a padding in px, pt, cm, etc.
- %: Define a padding in % of the width of the containing element.
- inherit: Define the padding should be inherited from the parent element.
- NOTE: NEGATIVE VALUES ARE NOT ALLOWED IN PADDING.
CSS padding-top
The CSS padding-top property is used to sets the top padding (space) of an element.
Example of padding-top
Output
Hello! This is Text Paragraph with padding-top property, padding-top is used to create a distance between top border and content of element.
CSS padding-right
The CSS padding-right property is used to sets the right padding (space) of an element.
Example of padding-right
Output
Hello! This is Text Paragraph with padding-right property, padding-right is used to create a distance between right border and content of HTML element.
CSS padding-bottom
The CSS padding-bottom property is used to sets the bottom padding (space) of an element.
Example of padding-bottom
Output
Hello! This is Text Paragraph with padding-bottom property example, padding-bottom is used to create a distance between bottom border and content of HTML element.
CSS padding-left
The CSS padding-left property is used to sets the left padding (space) of an element.
Example of padding-left
Output
Hello! This is Text Paragraph with padding-left property example, padding-left is used to create a space between left border of element to content of element.
CSS padding - All in One
CSS padding is a shorthand property for setting all the padding properties in one declaration
- padding: It is use to spacify the space between borders and content of element.
- padding: 10px That means '10px' padding from all side of border.
- padding: 10px 20px That means '10px' padding from top & bottom border; '20px' from left & right border.
- padding: 10px 20px 30px 50px That means the padding of content: 10px from top, 20px from right, 30px from bottom and 50px from left.