Negative margins are a simple and brilliant fix for the gap left behind when an image or text block is re-positioned relatively.
Sometimes we need to move something “a little to the left” or “just up a smidge.” And that is easy. Usually done with CSS properties such as padding or margins. But when we want to move something more than a little then we might use the position property.
Recently I wanted move a large text block upwards 160px.
.green_line_container_home {
position: relative;
top: -160px;
}
Doing so left an enormous gap between the text block and the footer. So I added a negative margin value to the same class selector.
.green_line_container_home {
position: relative;
top: -160px;
margin-bottom:-100px;
}
And that fixed the issue. Simple.
It’s easy to think that this might be a CSS hack, but it isn’t. It’s allowed by W3C.