padding-bottom
Definition
The padding-bottom CSS property sets the padding area on the bottom side of an element. Padding is the space between an element's content and its border, providing a buffer area that visually separates elements from each other.
Examples
Add 20px padding to the bottom of a paragraph:
p {
padding-bottom: 20px;
}
Add 2% padding to the bottom of a div:
div {
padding-bottom: 2%;
}
Add 1em padding to the bottom of an unordered list:
ul {
padding-bottom: 1em;
}
Values
| Value | Description |
|---|---|
| length | Specifies a fixed padding in length units (e.g., px, em, %). |
| initial | Sets the padding-bottom to its default value (0). |
| inherit | Inherits the padding-bottom value from its parent element. |
| unset | Resets the property to its inherited value if it inherits. |
Best Practices
- Use relative units like percentages or ems for responsive design, as they adjust based on the element's parent size or the user's font settings.
- Avoid using excessively large padding values, as they may cause layout issues or unintentional overlapping of elements.
- Be mindful of how padding affects an element's total width and height, which is calculated by adding the padding, border, and content size.
- Use shorthand properties like padding when setting the padding on multiple sides of an element to reduce code verbosity.
- Test your design across different screen sizes and devices to ensure proper padding is applied and the layout remains visually appealing.
Browser Compatibility
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |