Difficulty: Beginner
Padding is the space between an element's content and its border. It creates internal spacing within the element, pushing the content inward. Unlike margin, which creates space outside the element, padding is inside the element's border and is affected by the element's background color. If you set a blue background on an element, the padding area will also be blue.
There are four individual padding properties: padding-top, padding-right, padding-bottom, and padding-left. Each accepts length values (px, em, rem, etc.) or percentage values. You can set each side independently to create asymmetric spacing. For example, a card component might need more padding on the sides than on the top and bottom.
The padding shorthand property allows you to set all four sides in a single declaration. It follows a clockwise pattern starting from the top: padding: top right bottom left. There are several shorthand forms: padding: 20px (all four sides); padding: 10px 20px (top/bottom, left/right); padding: 10px 20px 15px (top, left/right, bottom); and padding: 10px 20px 15px 25px (top, right, bottom, left). The two-value and three-value shorthand forms are the most commonly used.
Percentage padding values are calculated relative to the width of the containing element -- not the height, even for padding-top and padding-bottom. This is a frequently misunderstood aspect of CSS. Because of this behavior, percentage padding can be used for the classic aspect-ratio hack: setting padding-bottom: 56.25% on an element with height: 0 creates a 16:9 aspect ratio container, since 9/16 = 0.5625.
Padding interacts with the box model in an important way. In the default content-box model, padding is added to the width and height of the element. So a box with width: 200px and padding: 20px will actually occupy 240px of horizontal space (200 + 20 left + 20 right). This additive behavior is one of the most common sources of layout bugs, which is why border-box sizing is widely adopted as a reset.
.card {
padding-top: 16px;
padding-right: 24px;
padding-bottom: 16px;
padding-left: 24px;
background-color: #f5f5f5;
border: 1px solid #ddd;
}
/* Asymmetric padding for different visual needs */
.sidebar-item {
padding-top: 8px;
padding-right: 12px;
padding-bottom: 8px;
padding-left: 32px; /* Extra left padding for indentation */
border-left: 3px solid #007bff;
}Individual padding properties let you control each side independently. The card uses more horizontal padding than vertical. The sidebar item uses extra-large left padding to create an indented look alongside a left border accent.
/* All four sides equal: 20px */
.box-a {
padding: 20px;
}
/* Vertical | Horizontal: 10px top/bottom, 24px left/right */
.box-b {
padding: 10px 24px;
}
/* Top | Horizontal | Bottom: 8px top, 16px sides, 24px bottom */
.box-c {
padding: 8px 16px 24px;
}
/* Top | Right | Bottom | Left (clockwise) */
.box-d {
padding: 10px 20px 15px 25px;
}The padding shorthand follows a clockwise pattern: top, right, bottom, left. The 2-value syntax (vertical, horizontal) is the most common in practice. Remember: when values are omitted, they mirror the opposite side -- 3 values means left copies right.
/* Fixed pixel padding */
.card {
padding: 16px 24px;
}
/* Relative em padding (scales with font-size) */
.text-block {
padding: 1em 1.5em;
font-size: 16px; /* padding becomes 16px 24px */
}
/* rem padding (relative to root font-size) */
.section {
padding: 2rem 1.5rem;
}
/* Percentage padding (relative to parent WIDTH) */
.responsive-box {
padding: 5%; /* All sides: 5% of parent's width */
}
/* Aspect ratio trick with percentage padding */
.ratio-16-9 {
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 9/16 = 0.5625 */
position: relative;
}Pixel values are fixed. Em values scale with the element's font-size, making padding proportional to text. Rem values scale with the root font-size for consistency. Percentage padding is always relative to the parent's width, even for top and bottom, which enables the aspect-ratio hack.
/* Padding is INSIDE the element -- background covers it */
.highlighted {
padding: 20px;
background-color: #fffde7;
border: 2px solid #fbc02d;
}
/* Padding affects total size in content-box model */
.content-box-demo {
box-sizing: content-box; /* default */
width: 200px;
padding: 20px;
border: 2px solid #333;
/* Total width: 200 + 20 + 20 + 2 + 2 = 244px */
}
/* Padding does NOT affect total size in border-box */
.border-box-demo {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 2px solid #333;
/* Total width: 200px (content shrinks to 156px) */
}The background color fills the padding area. In the default content-box model, padding adds to the total element size. In border-box model, padding is subtracted from the width, keeping the total size at 200px. This is why border-box is preferred.
Padding Properties, Padding Shorthand, Percentage Values, Box Model Layer, Padding vs Margin