let’s break down margin-top, margin-right, margin-bottom, and margin-left clearly.
1. What They Are
These four properties control the space outside an element’s border — but each one only affects a single side:
| Property | Affects side |
|---|---|
margin-top | Space above the element |
margin-right | Space to the right of the element |
margin-bottom | Space below the element |
margin-left | Space to the left of the element |
2. Syntax
selector {
margin-top: 20px; /* Top space */
margin-right: 15px; /* Right space */
margin-bottom: 25px; /* Bottom space */
margin-left: 10px; /* Left space */
}
3. Accepted Values
- Length units:
px,em,rem,cm(absolute or relative sizes) - Percentage: relative to the width of the containing element
- auto: lets browser calculate (common for horizontal centering)
- Negative values: pull elements closer (can cause overlap)
4. Example
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 150px;
height: 100px;
background: lightblue;
border: 2px solid navy;
margin-top: 30px;
margin-right: 40px;
margin-bottom: 20px;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="box">Box with custom margins</div>
</body>
</html>
📌 This will give the box:
- 30px space above
- 40px space to the right
- 20px space below
- 10px space to the left
5. Visual Tip
Think of it like a compass:
margin-top ↑
margin-left ← → margin-right
margin-bottom ↓
live margin sides playground :
pure HTML, CSS, and JavaScript — where you can change margin-top, margin-right, margin-bottom, and margin-left in real time using sliders.
<!DOCTYPE html>
<html>
<head>
<title>CSS Margin Sides Playground</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
.controls {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
max-width: 400px;
margin: auto;
}
label {
display: flex;
flex-direction: column;
align-items: center;
font-weight: bold;
}
input[type="range"] {
width: 150px;
}
.box {
width: 150px;
height: 100px;
background-color: lightblue;
border: 2px solid navy;
margin: 20px auto;
transition: margin 0.2s ease;
}
</style>
</head>
<body>
<h2>CSS Margin Sides Playground</h2>
<p>Adjust each slider to change margin for that side.</p>
<div class="controls">
<label>Top Margin
<input type="range" min="0" max="100" value="20" id="marginTop">
</label>
<label>Right Margin
<input type="range" min="0" max="100" value="20" id="marginRight">
</label>
<label>Bottom Margin
<input type="range" min="0" max="100" value="20" id="marginBottom">
</label>
<label>Left Margin
<input type="range" min="0" max="100" value="20" id="marginLeft">
</label>
</div>
<div class="box" id="box">Box</div>
<script>
const box = document.getElementById('box');
const topSlider = document.getElementById('marginTop');
const rightSlider = document.getElementById('marginRight');
const bottomSlider = document.getElementById('marginBottom');
const leftSlider = document.getElementById('marginLeft');
function updateMargin() {
box.style.marginTop = topSlider.value + 'px';
box.style.marginRight = rightSlider.value + 'px';
box.style.marginBottom = bottomSlider.value + 'px';
box.style.marginLeft = leftSlider.value + 'px';
}
[topSlider, rightSlider, bottomSlider, leftSlider].forEach(slider => {
slider.addEventListener('input', updateMargin);
});
</script>
</body>
</html>
