CSS padding Property
Description
The padding
property sets the required padding space on one to four sides of an element. The padding area is the space between an element and its border. Negative values are not allowed but decimal values are permitted. The padding property is a shorthand to avoid setting each side separately padding-top, padding-right, padding-bottom, padding-left.
- Initial value
- See individual properties
- Applies to
- All elements
- Inherited
- No
- Media
- Visual
- Computed value
- See individual properties
- Animatable
- Yes
- CSS Version
- CSS1, CSS2, CSS3
- JavaScript syntax
- object.style.padding
Syntax
padding: [ <length> | <percentage> ]{1,4}
Values
- <length>Specifies a non-negative fixed width.
- <percentage>A percentage relative to the width of the containing block. Negative values are not allowed.
Can have between 1 to 4 values:
1 value, all 4 sides have the same padding.
2 values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second.
3 values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third.
4 values, they apply to the top, right, bottom, and left, respectively.
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: 5px solid #000;
padding: 40px;
}
Give it a Try
Click the button below to experiment with this property.
Browser Support
Desktop | |||||
4 | 12 | 1 | 1 | 3.5 | 1 |
Tablets / Mobile | |||||
![]() |
|||||
≤37 | 18 | 4 | Yes | 1 | Yes |
Last updated by CSSPortal on: 3rd November 2019