CSS padding creates breathing room inside an element, between its text or child content and its border. Unlike margin, padding is transparent until you apply a background color or image—making padding essential for clickable buttons, readable cards, and spacious form inputs.
Like margin, padding accepts one to four values in clockwise order (top right bottom left), or individual side properties like padding-top and padding-left. Modern CSS also offers writing-direction-friendly logical shorthands: padding-block (top and bottom) and padding-inline (left and right).
.btn-action {
display: inline-block;
padding: 10px 20px;
background-color: #2563eb;
color: #ffffff;
border-radius: 6px;
text-decoration: none;
}
.input-field {
box-sizing: border-box;
width: 100%;
padding: 10px 14px;
border: 1px solid #cbd5e1;
border-radius: 6px;
}
By default, CSS adds padding on top of an element's width. A width: 100% input with padding: 12px becomes 100% + 24px wide and pokes out of its form container! Adding box-sizing: border-box; tells the browser to subtract padding and borders inside the declared width so width: 100% stays exactly 100%.
padding: Unlike margins, negative padding (padding: -10px;) is invalid in CSS and gets ignored completely.inline-block: Top and bottom padding on plain display: inline links paints background color behind adjacent text lines without expanding line height.10px 16px padding so targets reach comfortable ~44px tap heights.No. padding: auto; is invalid CSS; padding always takes non-negative lengths (px, rem, em) or percentages.
Percentage padding (even padding-top: 50%) always calculates relative to the width of the parent container, never its height.
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.