CSS padding creates empty space inside an element's border, pushing inner content (text, images) away from the element's outer edge boundaries.
Padding is declared for individual sides (padding-top, padding-right, padding-bottom, padding-left) or via shorthand values:
/* Individual sides */
div {
padding-top: 16px;
padding-left: 24px;
}
/* Shorthand declarations */
div { padding: 20px; } /* All 4 sides: 20px */
div { padding: 12px 24px; } /* Top/Bottom: 12px, Left/Right: 24px */
div { padding: 10px 20px 15px 5px; } /* Clockwise: Top, Right, Bottom, Left */
Key padding features:
background-color or background-image.<a>) enlarges interactive tap areas on mobile devices.flowchart TD
A["Border Edge"] --> B["Padding Area (Inherits Background Color)"]
B --> C["Inner Content Text / Children"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Padding Demonstration</title>
<style>
.btn-custom {
display: inline-block;
background-color: #2563eb;
color: #ffffff;
padding: 12px 24px; /* Generous padding for touch targets */
border-radius: 6px;
text-decoration: none;
font-weight: bold;
}
</style>
</head>
<body style="background-color: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; padding: 2rem;">
<h2>Button Padding Example</h2>
<a href="#" class="btn-custom">Clickable Button with Padding</a>
</body>
</html>
padding: 12px 24px; to create clean, proportionate UI buttons and card components.12px padding to interactive links and buttons for comfortable mobile finger tapping.box-sizing: border-box: Ensures padding values do not expand the container's declared width.Create a CSS class .card that sets padding: 1.5rem; and a background color of #1e293b!
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.