How do Negative Margins in CSS Work and Why is (margin-top:-5 != margin-bottom:5)?

The negative margin moves the content outside of the page or from its parent element. It allows drawing the element closer to its neighbor element. Using a negative margin, the element can be displayed in front of other elements. This concept is mostly used in making unique website designs, for example if there is a need to display the text in front of the image negative margin can be used for this purpose.

This article demonstrates:

• How do Negative Margins in CSS Work?
• Using Negative Margin Top Property
• Using Negative Margin Bottom Property
• Using Negative Margin Right Property
• Using Negative Margin Left Property
• Why is margin-top: -5 != margin-bottom: 5?

How do Negative Margins in CSS Work?

The negative margin moves the content outside of the page. The method of using a negative margin is the same as the positive one, except the “-” is used with the value. Follow the below-mentioned variations of the negative margin:

Existing HTML File
The “book.jpg” is the image stored in the local directory its path is provided as the “src” value. The “width” and “height” of the image are set to 50%. Now create a “<div>” element and set its background to “dodgerblue”. Inside the “<div>” element create a “<h1>” tag and set its “color” to black:

After compiling the above code, the output looks like:

The “<h1>” tag is at the bottom of the webpage before applying a negative margin.

Using Negative Margin Top Property

Add “margin-top” property to the “<h1>” element and give its value in negative. For instance, here -15% is the value of the margin-top property:

After executing the code, webpage look like this:

The output displays that the negative margin-top makes the “<h1>” element display in front of the parent element.

Using Negative Margin Bottom Property

Apply the same properties as above and just change the “margin-bottom” property. After that, add an image at the bottom of the “<div>” element to see visual changes:

After updating code our webpage looks like this:

The above output shows that the text is getting the bottom margin of -5%.

Using Negative Margin Right Property

By giving -55% value of margin-right property to <h3> element, it moves in the opposite direction:

After executing the code output look like this:

The output shows that the text is getting the negative margin-right.

Using Negative Margin Left Property

The margin-left property having a negative value works in the same way. In the below code, the “<h3>” element moves 50% to the left side in the opposite direction to the margin-left property:

The output of above code is:

That is how the negative margin works in CSS.

Why is margin-top:-5 != margin-bottom:5?

When the “margin-bottom:5%” is used it adds a margin from the bottom side towards the center of the element but when “margin-top:-5%” is used it adds a margin of 5% from the top but in the opposite direction(outside from the page).

Conclusion

In CSS, the negative margin works in the opposite direction by assigning the margin value. It moves the content of the element in the outward direction/outside of the page. The “margin-top:-5″ is not equal to “margin-bottom:5” because both property values move the content in opposite directions corresponding to the parent position. This article has successfully demonstrated how the negative margin works.