Home 〉 CSS Tutorials 〉 CSS Margin Explained with Examples - Master Spacing in Web Design
CSS Margin Explained with Examples - Master Spacing in Web Design !
CSS Margin Explained with Examples - Master Spacing in Web Design !
How can you control the space around HTML elements using CSS?
This tutorial focuses on the `margin` property, showing you how to create space outside elements. Understand how margins differ from padding and how to apply them effectively in your layouts.
CSS Margin - A Simple Guide with Examples
Margins in CSS are used to add 'space outside an element', pushing it away from other elements. It's a key part of the 'CSS box model' and is very useful when arranging layout and spacing between sections.
What Is CSS Margin?
The 'margin' is the transparent space 'outside the border' of an HTML element. It helps control the distance between elements on a webpage.
CSS Margin Syntax
Syntax ✍
margin: 10px; /* applies to all sides */
margin: 10px 20px; /* vertical | horizontal */
margin: 10px 20px 30px; /* top | horizontal | bottom */
margin: 10px 20px 30px 40px; /* top | right | bottom | left */
Step-by-Step CSS Margin Examples
Margin on All Sides
html code 📝 
<!DOCTYPE html>
<html>
<head>
<style>
.box {
margin: 20px;
background-color: #e0f7fa;
padding: 10px;
border: 1px solid #0097a7;
}
</style>
</head>
<body>
<div class="box">This box has 20px margin on all sides.</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Adds equal spacing around the box on all sides.
Vertical and Horizontal Margin
html code 📝
<!DOCTYPE html>
<html>
<head>
<style>
.box {
margin: 10px 30px;
background-color: #ffe0b2;
padding: 10px;
}
</style>
</head>
<body>
<div class="box">Top/Bottom: 10px, Left/Right: 30px</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Sets vertical (top and bottom) and horizontal (left and right) margin separately.
Four-Side Margin
html code 📝
<!DOCTYPE html>
<html>
<head>
<style>
.box {
margin: 5px 10px 15px 20px;
background-color: #fce4ec;
padding: 10px;
}
</style>
</head>
<body>
<div class="box">Top: 5px, Right: 10px, Bottom: 15px, Left: 20px</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Sets margin for each side individually using clockwise order.
Auto Margin for Centering
html code 📝
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
margin: 0 auto;
background-color: #f3e5f5;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div class="box">Centered with auto margin</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Using 'margin: 0 auto' centers a block element horizontally.
Negative Margin
html code 📝
<!DOCTYPE html>
<html>
<head>
<style>
.box {
margin-top: -10px;
background-color: #f1f8e9;
padding: 10px;
}
</style>
</head>
<body>
<div class="box">This box moves up using negative top margin.</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Negative margin pulls the element in the specified direction.
Margin vs Padding (Quick Comparison)
| Feature | Margin | Padding |
|---|---|---|
| Location | Outside the border | Inside the border |
| Affects | Space between elements | Space inside the element |
| Can be Auto | Yes ('margin: auto') | No |
Conclusion
CSS margin gives you control over the 'spacing between elements'. By learning how to use shorthand and individual properties, you can design clean, well-spaced layouts. Try using 'auto' to center elements and experiment with different values to find what looks best.
Suggested Topics:
- CSS background-color Tutorial with Examples - Learn Easily
- CSS Border Property Explained with Easy Examples for Beginners
- CSS Padding Explained with Examples | CSS Box Model Guide
- CSS Text Formatting Properties Explained with Examples | Master Text Styles in CSS
- CSS Width and Height Property Tutorial with Examples for Beginners
Related Topics:
- CSS Padding Explained with Examples | CSS Box Model Guide
- HTML div and span Tag Explained with Examples - Complete Guide
Frequently Asked Questions (FAQs)
What is margin in CSS?
Margin is the space outside an element. It creates distance between the element and others around it.
How is margin different from padding?
Margin adds space 'outside' the element. Padding adds space 'inside' between the content and border.
What is 'margin: auto' used for?
It is mostly used to 'center block elements horizontally' within their parent container.
Can I use negative margins?
Yes. Negative margins pull elements 'closer' or even 'overlapping' other elements.
What is the order of values in 'margin: 5px 10px 15px 20px'?
It goes in 'clockwise' order: top, right, bottom, left.