The padding-bottom CSS property sets the height of the padding area on the bottom of an element. Unlike margins, negative values are not allowed for padding. The padding shorthand property can be used to set paddings on all four sides of an element with a single declaration.

/* <length> values */
padding-bottom: 0.5em;
padding-bottom: 0;
padding-bottom: 2cm;

/* <percentage> value */
padding-bottom: 10%;

/* Global values */
padding-bottom: inherit;
padding-bottom: initial;
padding-bottom: unset;

An element's padding area is the space between its content and its border.

The effect of the CSS padding-bottom property on the element box

Initial value 0
Applies to all elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. It also applies to ::first-letter.
Inherited no
Percentages refer to the width of the containing block
Media visual
Computed value the percentage as specified or the absolute length
Animation type a length
Canonical order the unique non-ambiguous order defined by the formal grammar



The size of the padding as a fixed value. Must be nonnegative.
The size of the padding as a percentage, relative to the width of the containing block. Must be nonnegative.

Formal syntax

<length> | <percentage>


.content { padding-bottom: 5%; }
.sidebox { padding-bottom: 10px; } 


Browser compatibility

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 1 Yes 1 4 3.5 1
Feature Android webview Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
Basic support Yes Yes Yes 4 Yes Yes Yes

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.