1. css
  2. /properties
  3. /padding-bottom



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.


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;


lengthSpecifies a fixed padding in length units (e.g., px, em, %).
initialSets the padding-bottom to its default value (0).
inheritInherits the padding-bottom value from its parent element.
unsetResets 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

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera