CSS padding-bottom Property
Description
The padding-bottom
CSS property is used to define the amount of space, or padding, to be added to the bottom of an element's content box. It effectively increases the distance between the content and the element's bottom border or edge. This property is particularly useful for creating consistent spacing and layout within web pages, ensuring that content doesn't appear too close to the element's boundaries. It can be specified using various units such as pixels, percentages, or ems, allowing for flexible and responsive design control.
- Initial value
- 0
- Applies to
- All elements
- Inherited
- No
- Computed value
- <length> - the percentage as specified or the absolute length
- Animatable
- Yes
- JavaScript syntax
- object.style.paddingBottom
Interactive Demo
Syntax
padding-bottom: [ <length> | <percentage> ]
Values
- <length>Specifies a positive fixed width.
- <percentage>A percentage with respect to the width of the containing block.
- inherit
Example
<div class="layer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
.layer {
background: #fc3;
border-top: 5px solid #000;
border-bottom: 5px solid #000;
padding: 5px;
padding-bottom: 40px;
}
Browser Support
The following table will show you the current browser support for the CSS padding-bottom
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
12 | 1 | 1 | 3.5 | 1 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
18 | 4 | 14 | 1 | 1 | 37 |
Last updated by CSSPortal on: 2nd January 2024