Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
The margin Shorthand Property in CSS
The CSS margin shorthand property is used to define the margin area around an element. It sets values in clockwise direction: margin-top, margin-right, margin-bottom, and margin-left.
Syntax
selector {
margin: value;
}
The margin property accepts 1 to 4 values −
| Number of Values | Result |
|---|---|
| 1 value | All four sides have the same margin |
| 2 values | Top/bottom get first value, left/right get second value |
| 3 values | Top gets first, left/right get second, bottom gets third |
| 4 values | Top, right, bottom, left (clockwise) |
Example 1: Single Value
The following example applies 30px margin to all four sides −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: #f0f0f0;
padding: 10px;
}
.demo {
margin: 30px;
background-color: lightblue;
padding: 15px;
}
</style>
</head>
<body>
<div class="container">
<p>This paragraph has no margin.</p>
<p class="demo">This paragraph has 30px margin on all sides.</p>
<p>This paragraph has no margin.</p>
</div>
</body>
</html>
A light blue paragraph with 30px space around all sides, clearly separated from the other paragraphs.
Example 2: Two Values
The following example sets 2em for top/bottom margins and 1em for left/right margins −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: #f0f0f0;
padding: 10px;
}
.demo {
margin: 2em 1em;
background-color: lightgreen;
padding: 15px;
}
</style>
</head>
<body>
<div class="container">
<p>Regular paragraph above</p>
<p class="demo">This paragraph has 2em vertical margin and 1em horizontal margin.</p>
<p>Regular paragraph below</p>
</div>
</body>
</html>
A light green paragraph with larger vertical spacing (2em) and smaller horizontal spacing (1em) from surrounding content.
Example 3: Three Values
The following example sets 35px top margin, 70px left/right margins, and 50px bottom margin −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: #f0f0f0;
padding: 10px;
}
.demo {
margin: 35px 70px 50px;
background-color: lightcoral;
padding: 15px;
}
</style>
</head>
<body>
<div class="container">
<p>Regular paragraph above</p>
<p class="demo">This paragraph has asymmetric margins: 35px top, 70px sides, 50px bottom.</p>
<p>Regular paragraph below</p>
</div>
</body>
</html>
A light coral paragraph with different spacing on each side: smaller top margin, wide side margins, and medium bottom margin.
Example 4: Four Values
The following example sets different margins for all four sides in clockwise order −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: #f0f0f0;
padding: 10px;
}
.demo {
margin: 10px 30px 20px 50px;
background-color: lightyellow;
padding: 15px;
border: 2px solid orange;
}
</style>
</head>
<body>
<div class="container">
<p>Regular paragraph above</p>
<p class="demo">This paragraph has: 10px top, 30px right, 20px bottom, 50px left margins.</p>
<p>Regular paragraph below</p>
</div>
</body>
</html>
A yellow paragraph with orange border showing asymmetric spacing: small top margin, medium right margin, medium bottom margin, and large left margin.
Conclusion
The margin shorthand property provides a convenient way to set margins for all four sides of an element. Use fewer values for symmetric layouts or all four values for complete control over spacing.
3K+ Views
