The padding-bottom property controls the space between an element's bottom edge of its content area and the inside edge of its bottom border. It is one side of the element’s internal padding and directly increases the distance between the content (text, images, children) and the element’s border on the bottom side. Because padding is part of the element’s box, changing padding-bottom affects the element’s visual rhythm and spacing without creating external separation from neighboring elements the way margins do.

In the box model the padding area is distinct from the border and margin areas; backgrounds are painted into the content and padding areas, so any bottom padding will show the element’s background behind the added space (background). Whether that added padding increases the element’s outside dimensions depends on how sizing is calculated — for example the box sizing model can alter whether padding contributes to the element’s reported width/height (box-sizing). Also note that padding does not participate in collapsing behavior that affects adjoining vertical margins, so adding bottom padding will not collapse with an adjacent margin (margin).

Practically, bottom padding is often adjusted to create breathing room for content, to align elements visually, or to provide space before scrollbars or other overflow behavior; increasing bottom padding will expand the scrollable area when content overflows (overflow). Designers frequently manage all four sides of an element’s internal spacing using the shorthand padding, while still fine-tuning a single side like the bottom with padding-bottom when only that vertical spacing needs to change.