Introduction to Negative Margin CSS
Positive margin values move the content towards the inner side of its position or page. But if we take negative margin values, it moves the content towards outside of its position or page. The margin property in html gives space around the outermost element’s content of the box-like structure. The padding property in html gives space around the innermost element’s content of the box-like structure. The space around padding and margin is called a border.
The difference between the padding, margin, and border you can see below:
The above image gets with positive margin values.
How does Negative Margin work in CSS?
- The negative margin value gives an overlapping feature. Which is really helpful while developing web pages.
- Real-time scenario: If we want some text on top of the image or some other then we simply use a negative margin.
Syntax 1:
div
{
margin: -10px,-10px,-10px,-10px; //margin positions
}Syntax 1 Explanation:
- If we apply margin with 4 negative values then the first value is for top, the second value is for right, the third value is for the bottom and the fourth value is for left applied respectively.
Syntax 2:
div
{
margin: -10px,-10px,-10px; //margin positions
}Syntax 2 Explanation:
- If we apply margin with 3 negative values, then the first value is for top, the second value is for left and right, the third value is for bottom applied respectively.
Syntax 3:
div
{
margin: -10px,-10px; //margin positions
}Syntax 3 Explanation:
- If we apply margin with 2 negative values, then the first value is for the top and bottom and the second value is for left and right applied respectively.
Syntax 4:
div
{
margin: -10px; //margin positions
}Syntax 4 Explanation:
- If we apply margin with only a single negative value, then applied it for all four sides equally.
- If we want to apply only a negative margin to a single side, then CSS provides predefined properties.
- margin-left: -10px: apply margin -10px to left side.
Syntax:
div
{
margin-left: -10px;
}- margin -right: -10px: apply margin -10px to right side.
Syntax:
div
{
margin-right: 10px;
}- margin -top: -10px: apply margin -10px to top side.
Syntax:
div
{
margin-top: -10px;
}- margin -bottom: -10px: apply margin -10px bottom side.
Syntax:
div
{
margin-bottom: -10px;
}Examples of Negative Margin CSS
Given below are the examples of Negative Margin in CSS:
Example #1
Negative margin to the bottom side.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="NegativeMarginBottom.css">
<title>Negative Margin</title>
</head>
<body>
<font color="green"><h2 align="center">Negative Margin</h2></font>
<img src="p2.jpg" class="image">
<p class="style1">I am working with Negative margin</p>
</body>
</html>CSS Code:
.style1 {
font-size: 30px;
margin-bottom: -50px;
background: olive;
}
.image {
width: 500px;
height: 500px;
float:left; /* Keeps the image at left side */
}Output before applying negative value:
Output after applying negative value:
Explanation:
- As you can see in the output negative bottom margin, paragraph overlaps by image.
- The negative bottom margin moves the content bottom side.
Example #2 – Negative margin to the left side.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="NegativeMarginLeft.css">
<title>Negative Margin</title>
</head>
<body>
<font color="green"><h2 align="center">Negative Margin</h2></font>
<img src="p1.jpg" class="image">
<p class="style1">I am working with Negative margin</p>
</body>
</html>CSS Code:
.style1 {
font-size: 30px;
margin-left: -50px;
background: olive;
}
.image {
width: 500px;
height: 500px;
float:left; /* Keeps the image at left side */
}Output before applying negative value:
Output after applying negative value:
Explanation:
- As you can see in the output negative left margin, paragraph overlaps by image. Negative left margin moves the content left side.
- As you can observe the very left end, the paragraph comes out from the image.
Example #3 – Negative margin to the top side.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="NegativeMarginTop.css">
<title>Negative Margin</title>
</head>
<body>
<font color="green"><h2 align="center">Negative Margin</h2></font>
<p>
<img src="p3.jpg" class="image">
</p>
<p class="style1" align="center">I am working with Negative margin</p>
</body>
</html>CSS Code:
.style1 {
font-size: 30px;
margin-top:-50px;
background: olive;
}
.image {
width: 400px;
height: 400px;
display: block;
margin-left: auto;
margin-right: auto;
}Output before applying negative value:
Output after applying negative value:
Explanation:
- As you can see in the output negative top margin, paragraph overlaps by image. Negative top margin moves the content top side.
Example #4 – Negative margin to the right side.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="NegativeMarginRight.css">
<title>Negative Margin</title>
</head>
<body>
<font color="green"><h2 align="center">Negative Margin</h2></font>
<img src="p2.jpg" class="image">
<p class="style1" align="center">I am working with Negative margin</p>
</body>
</html>CSS Code:
font-size: 30px;
margin-right: -50px;
background: olive;
}
.image {
width: 500px;
height: 500px;
float:right; /* Keeps the image at right side */
}Output before applying negative value:
Output after applying negative value:
Explanation:
- As you can see in the output negative right margin, paragraph overlaps by image. The negative right margin moves the content right side.
- As you can observe very right end, the paragraph comes out from the image.
Example #5 – Negative margin with text.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="NegativeMarginText.css">
<title>Negative Margin</title>
</head>
<body>
<font color="green"><h2 align="center">Negative Margin</h2></font>
<p class="style1" align="center">First Paragraph: I am working with Negative margin.It always tries to move the text away from it's position</p>
<p class="style2" align="center">Second Paragraph: I am working with Negative margin.It always tries to move the text away from it's position</p>
</body>
</html>CSS Code:
.style1 {
font-size: 30px;
background: brown;
width: 600px;
}
.style2 {
font-size: 30px;
width: 600px;
background: orange;
margin: -50px -20px -50px -80px;
}Output before applying negative value:
Output after applying negative value:
Explanation:
- As you can see in the output negative margin, the paragraph overlaps by another paragraph.
- The negative margin moves the content away from its position.
- We can conclude margin negative values can also be applied with text as well.
Conclusion
The negative margin moves the content away from its position towards outside. We can apply a negative margin to top, right, bottom and left sides and negative margin applied with multiple values like positive margin values.
Recommended Articles
This is a guide to the Negative Margin CSS. Here we discuss the basic concept, examples and how does Negative Margin works in CSS? You may also have a look at the following articles to learn more –
