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
Setting Margin Space around elements using CSS
The CSS margin property is used to create space around elements, outside of their borders. The margin property is a shorthand for margin-top, margin-right, margin-bottom, and margin-left.
Let's say we have set the following margins using the shorthand property −
margin: 10px 45px 35px 70px;
The above means −
10 pixels for the top margin
45 pixels for the right margin
35 pixels for the bottom margin
70 pixels for the left margin
Syntax
selector {
margin: value;
}
Possible Values
| Value | Description |
|---|---|
length |
Set margin in px, em, rem, etc. Default is 0 |
% |
Set margin as percentage of containing element |
auto |
Browser calculates margin automatically |
Example: Margins with Pixel Values
The following example sets margins using pixel values. Here we set 10px for top and bottom, 15px for left and right −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 20px;
}
.box {
margin: 10px 15px;
border: 2px solid #333;
padding: 20px;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
</div>
</body>
</html>
Two light blue boxes with 10px top/bottom margins and 15px left/right margins appear side by side, with visible spacing around each box.
Example: Margins with Percentage Values
Margins can be set as percentages of the containing element's width. This example uses 5% top/bottom and 10% left/right margins −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 500px;
background-color: #f0f0f0;
padding: 20px;
}
.percentage-box {
margin: 5% 10%;
border: 2px solid red;
padding: 15px;
background-color: lightgreen;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="percentage-box">Box with percentage margins</div>
</div>
</body>
</html>
A light green box with red border appears inside a gray container, with margins calculated as percentages of the container's width.
Example: Margin Collapse
Adjacent vertical margins collapse into a single margin equal to the larger of the two. Here, 50px margin wins over 30px −
<!DOCTYPE html>
<html>
<head>
<style>
.first-box {
border: 2px solid blue;
background-color: lightblue;
padding: 20px;
margin-bottom: 50px;
text-align: center;
}
.second-box {
border: 2px solid green;
background-color: lightgreen;
padding: 20px;
margin-top: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="first-box">First box (margin-bottom: 50px)</div>
<div class="second-box">Second box (margin-top: 30px)</div>
</body>
</html>
Two boxes appear with only 50px of space between them (not 80px) due to margin collapse - the larger margin value takes precedence.
Conclusion
The CSS margin property creates space around elements and supports various values including pixels, percentages, and auto. Remember that vertical margins collapse, taking the larger value when two margins meet.
87 Views
