here’s a clear breakdown of CSS Padding so you fully get how it works.
1. What is Padding?
Padding is the space inside an element, between its content and its border.
It pushes the content inward, without affecting elements outside.
📌 Margin = outside space
📌 Padding = inside space
2. Padding Properties
You can set padding for each side individually:
padding-toppadding-rightpadding-bottompadding-left
Or you can use the shorthand padding property:
Shorthand rules:
/* 4 values: top right bottom left */
padding: 10px 20px 30px 40px;
/* 3 values: top, left & right, bottom */
padding: 10px 20px 30px;
/* 2 values: top & bottom, left & right */
padding: 10px 20px;
/* 1 value: all sides */
padding: 10px;
3. Accepted Values
- Length units:
px,em,rem,cm, etc. - Percentage:
%(relative to the element’s width) - 0 (means no padding)
- Negative values not allowed for padding.
4. Visual Representation
___________________________
| Border |
| ┌───────────────────┐ |
| | Padding | |
| | ┌───────────┐ | |
| | | Content | | |
| | └───────────┘ | |
| └───────────────────┘ |
|___________________________|
5. Important Notes
- Padding increases element size if you don’t use
box-sizing: border-box;.- By default, padding adds to width/height.
- Example: A div with
width: 200px; padding: 20px;will be 240px wide total.
- Backgrounds cover padding — background color or image extends into padding.
- Padding affects clickable areas in buttons/links.
✅ Example
<div style="
border: 2px solid navy;
padding: 20px;
background: lightblue;
">
This box has 20px padding.
</div>
live HTML/CSS Padding Playground :
<!DOCTYPE html>
<html>
<head>
<title>CSS Padding Playground</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.controls {
margin-bottom: 20px;
}
label {
display: block;
margin: 5px 0;
}
.box {
width: 250px;
height: 150px;
border: 3px solid navy;
background-color: lightblue;
transition: all 0.2s ease;
}
</style>
</head>
<body>
<h2>CSS Padding Playground</h2>
<p>Move the sliders to adjust padding for each side.</p>
<div class="controls">
<label>Padding Top: <input type="range" id="paddingTop" min="0" max="100" value="20"> <span id="topValue">20px</span></label>
<label>Padding Right: <input type="range" id="paddingRight" min="0" max="100" value="20"> <span id="rightValue">20px</span></label>
<label>Padding Bottom: <input type="range" id="paddingBottom" min="0" max="100" value="20"> <span id="bottomValue">20px</span></label>
<label>Padding Left: <input type="range" id="paddingLeft" min="0" max="100" value="20"> <span id="leftValue">20px</span></label>
</div>
<div class="box" id="box">
<p>This is the content inside the box.</p>
</div>
<script>
const box = document.getElementById('box');
const topSlider = document.getElementById('paddingTop');
const rightSlider = document.getElementById('paddingRight');
const bottomSlider = document.getElementById('paddingBottom');
const leftSlider = document.getElementById('paddingLeft');
const topValue = document.getElementById('topValue');
const rightValue = document.getElementById('rightValue');
const bottomValue = document.getElementById('bottomValue');
const leftValue = document.getElementById('leftValue');
function updatePadding() {
const top = topSlider.value + 'px';
const right = rightSlider.value + 'px';
const bottom = bottomSlider.value + 'px';
const left = leftSlider.value + 'px';
box.style.paddingTop = top;
box.style.paddingRight = right;
box.style.paddingBottom = bottom;
box.style.paddingLeft = left;
topValue.textContent = top;
rightValue.textContent = right;
bottomValue.textContent = bottom;
leftValue.textContent = left;
}
topSlider.addEventListener('input', updatePadding);
rightSlider.addEventListener('input', updatePadding);
bottomSlider.addEventListener('input', updatePadding);
leftSlider.addEventListener('input', updatePadding);
</script>
</body>
</html>
How It Works
- Four sliders control
padding-top,padding-right,padding-bottom, andpadding-leftindependently. - The
<span>next to each slider shows the live pixel value. - Padding changes instantly with smooth transition.
