CSS padding-bottom Property

Sets the height of the padding area inside an element at the bottom. This creates space between the element's content and its bottom border.

selector { padding-bottom: value; }
<length> Specifies a fixed padding distance using units like px, em, rem, or pt.
<percentage> Defines the bottom padding as a percentage of the width of the parent container.

Code Examples

A basic example showing a container with a background and a specific bottom padding value to create internal space.

<div style="background-color: #e0e0e0; border: 2px solid #333333; padding-bottom: 40px;">
  <p>This content has 40 pixels of space at the bottom, separating it from the border.</p>
</div>

An advanced example using a CSS transition and JavaScript to dynamically toggle the bottom padding of a component.

<div id="info-box" style="background-color: #222222; color: #ffffff; padding: 20px; padding-bottom: 20px; transition: padding-bottom 0.4s;">
  <h3>Interactive Card</h3>
  <p>Adjust the bottom spacing dynamically with the button below.</p>
  <button onclick="togglePadding()" style="padding: 10px; cursor: pointer;">Toggle Bottom Gap</button>
</div>

<script>
function togglePadding() {
  const box = document.getElementById("info-box");
  const isExpanded = box.style.paddingBottom === "80px";
  box.style.paddingBottom = isExpanded ? "20px" : "80px";
}
</script>

Pro Tip

If you are building a layout and notice your bottom padding is making the element taller than expected, check your "box-sizing" property. Setting "box-sizing: border-box" ensures that the padding is included within the defined height of the element, rather than being added on top of it.

Deep Dive

Think of an element like a picture frame. The content is your photo, and the padding is the matting inside the frame. The "padding-bottom" property specifically controls the thickness of that matting at the bottom edge. This space stays inside the element and inherits the element's background color. Unlike margins, which create space outside the border between different elements, padding is strictly internal. If you have a background color or image applied, it will extend into this padding area.

Best Practices

Use "padding-bottom" to give your content breathing room so it doesn't look cramped against the bottom edge of its container. For responsive designs, consider using relative units like rem or percentages. If you are setting all four sides, use the "padding" shorthand to keep your code clean. Always remember that padding is part of the clickable area for links and buttons.

Common Pitfalls

A common mistake is forgetting that "padding-bottom" percentages are calculated based on the width of the parent, not the height. This can lead to unexpected spacing in tall, narrow containers. Also, keep in mind that negative values are invalid for padding properties; if you need to pull elements closer together, use negative margins instead.

Accessibility

Ensure that large amounts of bottom padding do not hide important content or calls-to-action below the fold on mobile devices without clear visual cues that the user needs to scroll. Maintain enough padding to ensure hit targets like buttons are large enough for users with motor impairments to tap easily.

Dev Data Table: padding-bottom property

default 0
animatable yes
inherited no
experimental no
year_intro 1996
year_standard 1996
js_syntax_1 element.style.paddingBottom = "20px";
js_syntax_2 element.style.setProperty("padding-bottom", "20px");
js_note In JavaScript, use camelCase (paddingBottom) when accessing the style object directly, but use the kebab-case string when using the setProperty method.
browsers { "Chrome": 1, "Edge": 12, "Firefox": 1, "Safari": 1, "Opera": 3.5, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 10.1 }
results render here...