A
V
Padding
Definition and Usage
The Padding utility adds inner spacing between an element's content and its border using the padding property. This ensures content is visually separated from the edges of the element, improving readability and layout structure.
Definition and Usage
Examples
| Property | Value |
|---|---|
| Pg1 | padding: 1px; |
| Pg50 | padding: 50px; |
| Pg100 | padding: 100px; |
Note
The range of padding values is from 0 to 100.
Individual Padding
Definition and Usage
ndividual padding utilities apply spacing to a specific side of an element: top, bottom, left, or right. This allows for precise control over internal spacing without affecting all sides.
Padding Top
Definition and Usage
The Padding Top utility adds spacing between the top edge of an element and its content using the padding-top property. It helps create vertical separation from elements above without affecting other sides.
Examples
| Property | Value |
|---|---|
| PgTp1 | padding-top: 1px; |
| PgTp50 | padding-top: 50px; |
| PgTp100 | padding-top: 100px; |
Note
The range of padding-top values is from 0 to 100px.
padding bottom
Definition and Usage
The Padding Bottom utility adds spacing between the bottom edge of an element and its content using the padding-bottom property. It helps create vertical breathing room below the content, enhancing layout clarity.
Examples
| Property | Value |
|---|---|
| PgBm1 | padding-bottom: 1px; |
| PgBm50 | padding-bottom: 50px; |
| PgBm100 | padding-bottom: 100px; |
Note
The range of padding-bottom values is from 0 to 100px.
Padding Left
Definition and Usage
The Padding Left utility adds spacing between the left edge of an element and its content using the padding-left property. It’s commonly used to indent content or align items away from the left border.
Examples
| Property | Value |
|---|---|
| PgLt1 | padding-left: 1px; |
| PgLt50 | padding-left: 50px; |
| PgLt100 | padding-left: 100px; |
Note
The range of padding-left values is from 0 to 100px.
Padding Right
Definition and Usage
The Padding Right utility adds spacing between the right edge of an element and its content using the padding-right property. It helps prevent content from sticking to the right edge and maintains clean, readable layouts.
Examples
| Property | Value |
|---|---|
| PgRt1 | padding-right: 1px; |
| PgRt50 | padding-right: 50px; |
| PgRt100 | padding-right: 100px; |
Note
The range of padding-right values is from 0 to 100px.
padding Top Bottom
Definition and Usage
The Padding Top and Bottom utility adds equal vertical spacing using the padding-top and padding-bottom properties. This is useful for creating consistent space above and below content without affecting horizontal padding.
Examples
| Property | Value |
|---|---|
| PGTpBm1 | padding-top: 1px; padding-bottom: 1px; |
| PgTpBm50 | padding-top: 50px; padding-bottom: 50px; |
| PgTpBm100 | padding-top: 100px; padding-bottom: 100px; |
Note
The range of padding-top-bottom values is from 0 to 100px. By using this property you can add top and bottom padding at the same time.
Padding Left Right
Definition and Usage
The Padding Left and Right utility applies equal horizontal spacing on both sides of an element using the padding-left and padding-right properties. It ensures consistent inner spacing without affecting vertical padding.
Examples
| Property | Value |
|---|---|
| PgLtRt1 | padding-left: 1px; padding-right: 1px; |
| PgLtRt50 | padding-left: 50px; padding-right: 50px; |
| PgLtRt100 | padding-left: 100px; padding-right: 100px; |
Note
The range of padding-left-right values is from 0 to 100px. By using this property you can add left and right padding at the same time.