Negative margin a CSS myth

 

Well, using margin property is not a big deal and yes we do use it frequently, but you know what having margin value in negative is pretty useful stuff I guess. Well, margin is a CSS property that pushes the element aside of that specific side. Where as negative margin pull that element towards that side.

Qualifications of negative margin

By W3 standards negative margin is not a hack and it is a standard code to apply. Moreover it is on the useful stuff that works great in every browser but on test I found that Dreamweaver design view doesn't support it though.

Design Expects

By design expects it is quite useful as they have good browser support capability. Some of them are listed below.

Sliding border

We have noticed a border on other border. The old schools' use to have a background with a specific height that seems like a border and child has border width same as background to make it look like sliding borders.

But a better way to do it is to use have a parent element with a certain border and then child with same width border and then same negative margin to override on parent border.

HTML

<div class='parent'>
<div class='child'></div>
</div>

CSS

.parent{
border-bottom:3px solid #222;
}
.child{
border-bottom:3px solid #ff0;
margin-bottom:-3px;
width:40px;
height:25px;
}

I coded something on Codepen worth to see.

See the Pen myqqZJ by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

This one is one of the method to reduce effort, errors and make the coding more productive. Further while coding multiple tab I found this is one as a good alternative of lava lamp stuff.

Overlapping elements

Overlapping style is quite impressive and used in many designs, however it seems different but not a big deal to code.

Elements overlapping header,seems good

 Not only these kind of design but overlapping in small elements like social icons on navigation bar or meta content on blog posts are common uses of it.

One more live example of content overlapping header can be found on Dribbble about page:

Well doing such kind things adds a plus point in design well, to make this kind of effect the markup should be something like this one:
 HTML

<header>
<h1>Blogger Ever</h1>
</header>
<div class='main-content'>
    <div class='main-inner'>This is content</div>
</div>

CSS

header{
padding-bottom:50px;
background:#ddd;
}
.main-content{
margin-top:-40px;
background:#eee;
}

I've seen many old schools' using some sort of fixed background image and fixed heights of the elements to create this kind of effects where as it is not a big deal to create it with negative margin. Especially when responsive design is a condition; in-short, ease of coding.

Positioning fixed or absolute positioned elements

While handling the absolute or fixed positioned elements with positioning style properties and with margins. While coding jQuery panels I used negative margins to hide the panel off screen, and all the animation were done on that margin.

For example if I want to move something off screen to on screen, then using right or left property doesn't work well. By using right to 100% the element will go off-screen but you won't be able to carry out a good calculated animation with percentages. Instead if the element is at left 0% and negative margin-left that is equals to the width of the off-screen element than on trigger just make margin left to 0 to carry out a good animation.

I'd discussed about positioning an element with absolute or fixed position exactly at center of the screen, that one also done by negative margin.

Conclusion

Negative margin is a good solution to many problems, moreover a good cross browsing and standard W3 property to make the coding more easy. Have useful and effect uses and applications, listed above 3 uses are just a glance pretty more can be done with this.

If found some more uses of negative margin share with me so I can update this post for readers.