The padding-bottom
CSS property sets the height of the padding area on the bottom of an element.
The padding-bottom
CSS property sets the height of the padding area on the bottom of an element.
An element's padding area is the space between its content and its border.
Note: The padding
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: revert; padding-bottom: revert-layer; padding-bottom: unset;
The padding-bottom
property is specified as a single value chosen from the list below. Unlike margins, negative values are not allowed for padding.
<length>
The size of the padding as a fixed value. Must be nonnegative.
<percentage>
The size of the padding as a percentage, relative to the inline size (width in a horizontal language, defined by writing-mode
) of the containing block. Must be nonnegative.
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 and ::first-line . |
Inherited | no |
Percentages | refer to the width of the containing block |
Computed value | the percentage as specified or the absolute length |
Animation type | a length |
padding-bottom =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
.content { padding-bottom: 5%; } .sidebox { padding-bottom: 10px; }
Specification |
---|
CSS Box Model Module Level 3 # padding-physical |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
padding-bottom |
1 | 12 | 1 | 4 | 3.5 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |
padding-top
, padding-right
, padding-left
and the padding
shorthandpadding-block-start
, padding-block-end
, padding-inline-start
, and padding-inline-end
and the shorthands padding-block
and padding-inline
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom