CSS padding Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The CSS padding property is used to control the spacing between an element's content and its border. It allows you to add space either inside or outside an element's border, depending on how it's applied. Padding can be defined using various units such as pixels, percentages, or ems, and it can be set individually for each side of an element (top, right, bottom, left) or all sides at once. This property is essential for creating proper spacing and layout within web design, helping to ensure content is visually appealing and well-structured on a webpage. 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
Computed value: See individual properties
Animatable: Yes
JavaScript syntax: object.style.padding

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

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

HTML

<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>

CSS

.layer { 
   background: #fc3;
   border: 5px solid #000;
   padding: 40px;
}

Result

Editor

Browser Support

The following table will show you the current browser support for the CSS padding property.

Desktop

12	1	1	3.5	1

Tablets / Mobile

18	4	14	1	1	37

Last updated by CSSPortal on: 2nd January 2024

Support Us