CSS Margin is the space outside an element, separating it from other elements. It adds space around an element, affecting its positioning and creating gaps between other elements.
CSS provides properties to specify the margin for each side of an element individually.
- margin-top: Sets the margin space above the element.
- margin-right: Sets the margin space to the right of the element.
- margin-bottom: Sets the margin space below the element.
- margin-left: Sets the margin space to the left of the element.
Margin properties can have the following values:
- Length in cm, px, pt, etc.
- Width % of the element.
- Margin calculated by the browser: auto.
Syntax:
.myDiv {
margin-top: 80px;
margin-right: 100px;
margin-bottom: 50px;
margin-left: 80px;
}Example: In this example, we are using the above-mentioned margin properties.
<!DOCTYPE html> <html>
<head>
<title>Margin Example</title>
<style>
body {
margin: 0;
padding: 20px;
}
h2 {
color: green;
}
.parentDiv {
background-color: lightblue;
border: 1px solid black;
padding: 20px;
width: 40%;
/* Applying margin to the child div */
}
.childDiv {
background-color: wheat;
/* Applying margin to the child div */
margin-top: 20px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 30px;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<div class="parentDiv">
<div class="childDiv">
Margin box
</div>
</div>
</body>
</html>
|
Output:
Margin – Shorthand Property
CSS, the margin shorthand property allows you to set the margin on all sides (top, right, bottom, left) of an element in a single line. with some combinations so we can easily apply padding to our targeted element.
- If the margin property has one value
- If the margin property contains two values
- If the margin property contains three values
- If the margin property contains four values
Method 1: If Margin Property has one Value
If the margin property has one value of margin:20px; The margin property with one value of 20px applies 20 pixels of margin to all sides equally.
Syntax:
.element {
margin: 20px;
/* Applies 20px margin to all sides */
}
Example: In this example, we are using a margin property with single values.
<!DOCTYPE html> <html> <head> <title>Margin Example</title>
<style>
body {
margin: 0;
padding: 20px;
}
h2 {
color: green;
}
.parentDiv {
background-color: lightgray;
border: 1px solid black;
padding: 20px;
width: 40%;
}
.childDiv {
background-color: wheat;
/* Applying 20px margin to all sides */
margin: 20px;
}
</style>
</head> <body> <h2>GeeksforGeeks</h2>
<div class="parentDiv">
<div class="childDiv">
Margin box
</div>
</div>
</body> </html> |
Output:
Method 2: If Margin Property Contains Two Values
If the margin property contains two values, margin: 35px 40px; here top and bottom margins are 35px and the right and left margins are 40px.
Syntax:
.element {
margin: 35px 40px;
}
Example: Here we are using margin property with respect to the above method.
<!DOCTYPE html> <html>
<head>
<title>Margin Example</title>
<style>
div {
border: 2px solid black;
margin: 35px 40px;
background-color: lightgray;
}
h2 {
color: green;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<div>margin has 2 values</div>
</body>
</html>
|
Output:
Method 3: If Margin Property Contains Three Values
If the margin property contains three values, the top margin is 40px, The right and left margins are 100px, and the bottom margin is 120px.
Syntax:
margin: 40px 100px 120px;
Example: In this example, we are using the margin property with three values.
<!DOCTYPE html> <html>
<head>
<title>Margin Example</title>
<style>
div {
border: 2px solid black;
margin: 40px 100px 120px;
background-color: lightgreen;
}
h2 {
color: green;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<div>margin has 3 values</div>
</body>
</html>
|
Output:
Method 4: If Margin Property Contains Four Values
If the margin property contains four values, margin: 40px 100px 120px 80px; in this top margin is 40px, the right margin is 100px and bottom margin is 120px and the left margin is 80px.
Syntax:
margin: 40px 100px 120px 80px;
Example: In this example, we are using the margin property with four values.
<!DOCTYPE html> <html>
<head>
<title>Margin Example</title>
<style>
div {
border: 2px solid black;
margin: 40px 100px 120px 80px;
background-color: lightsalmon;
}
h2 {
color: green;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<div>margin has 4 values</div>
</body>
</html>
|
Output: