There are situations when using negative margins on an element can be the easiest way to “nudge” it out from the rest, treating the exception to the rule in order to simplifiy code.
Case in point, I was recently toying with the idea of treating headings in the content area of SimpleBits to match the background “flags” that currently stick out from the right edge of the sidebar (I didn’t end up implementing it in the end). These heading flags stick to the right edge of the layout, with padding being declared independently on paragraphs and lists that sit under each heading so that those elements don’t butt up against the right edge.
For the content column however, I already have a gutter declared on the entire column, giving 25px of padding on either side. I want to maintain this spacing, with <h3> elements being the only exception. For <h3>s, I’d like the background color to stick to the left edge of the layout, with the heading text lining up with the rest of the content — 25px in from the left.
I could take the same approach I took with the sidebar, getting rid of the default gutter and instead adding a “catch all” declaration for the left margin on predictable elements (but not headings). Hypothetically:
#content p, #content ul, #content dl {
margin-left: 25px;
}
But this approach requires pre-determining the block elements that could be placed in the content column, and adding them to this declaration each time. It works fine in the sidebar, where the content there is predictable, but the content area can contain a multitude of block-level elements at any time.
So, better yet, I could treat <h3> elements as the exception and apply a negative left margin to nudge it out of the gutter that’s set for the column. Then they’ll sit flush with the left edge of the layout.
#content h3 {
margin-left: -25px;
padding-left: 25px;
background: #cee48b;
}
A positive left padding value of 25px is added to make sure the heading’s text lines up with the rest of the content in the column.
Sometimes it’s easier to deal with the exception to the rule, rather than add declarations for all other elements around it. With the latter, it’s necessary to prepare for every possible scenario. There are times (like the one I was experimenting with) when a negative value can help simplify things.
Related: See also “Easy CSS drop shadows” from Dunstan Orchard, where negative margins are used to apply a drop shadow effect to photos. This technique was also extended and published at A List Apart.
Dribbble What are you working on? 
Instapaper Icon design 
Sass For Web Designers Paperback + eBook A Book Apart
CSS3 For Web Designers Paperback + eBook A Book Apart
Bulletproof Web Design Third Edition New Riders 
Handcrafted CSS Book and DVD New Riders 
Web Standards Solutions Special Edition Friends of Ed
34 Comments
Simple and effective : I used this in several of our clients sites and even on our website. But never thought it could be a bad thing that having a negative margin, or did I miss something ?
Yes very nice and effective. Like Sven said, what’s the problem with using negative margins? Is that deprecated?
I see no problem with that. I mean, the negative margins ARE allowed, or else we couldn’t use them. More power to the people if they get you out of a sticky situation.
I had to use them on a recent project and I don’t regret it. It got the job done and works across the board.
Yes, erm, negative margins are considered “okay” to use, no?
I often find myself using them.
I didn’t mean to imply that negative margins are evil. They’re perfectly fine — just not always the first solution that comes to mind, and that’s why I thought I’d document it.
I could run into issues if I had
<h3>elements that sit in multiple colmuns within the content container (and I do on a few pages). In other words, mixed results could appear if the<h3>is anywhere but lined up with the rest of the column’s content.But in general, there’s nothing wrong or shady about negative margins (that I’m aware of).
Awesome write-up, Dan. Negative margins can be a real life-saver, especially when you’re working with liquid layouts. My craptacular Whitewash skin uses negative margins to pull various content areas up “over the hem” of other columns, allowing me to get a bit more pixel precision when I need various elements to overlap (*cough*layout.css*cough*).
So, yeah. Great when you need to articulate something like “move this over sixty percent, but minus 5 pixels.”
God, I need coffee.
Are you actually going to implement this method then? Might look quite nice.
I recently ran into a bug in Firefox that was as a result of using negative margins.
I had an element negatively positioned in a box with form elements. Everything was positioned correctly but the cursor in the input or textarea would be off by the amount of negative margin.
Just something to keep in mind! ;)
I’ve used negative margins in the past to create the same effect, but lately, I find myself using them for other cases as well.
Evil? No. Sneaky? Maybe…
Thanks for sharing this “css-insight”, Dan. I have created this effect often by the use of
position:relative; left:-25px;. It works, but is a nightmare to debug in IE. In the future I’ll go the negative margin route for sure.Yeah negative margins can come in really handy sometimes. I used something very similar to what you describe here in the previous design of 456 Berea Street.
Do this all the time. It’s great. I didn’t want to muck up the CSS with lots of exceptions and extra rules, so I was feeling very smug and happy with myself when I thought of using negative margins.
Trouble is, don’t use negative vertical margins as they’re hell to sort out in IE… well they are in lists.
Trouble is, don’t use negative vertical margins as they’re hell to sort out in IE… well they are in lists.
This is true. I’ve used negative margins a fair bit, and the only problems I’ve had with them that I can’t seem to fix are negative margins in lists in IE.
I was using negative margins to move my navigation into place (vertically, nor horizontally) and I was using a ems instead of pixels (because the height of the navigation element was set in ems). I noticed a great incosistency between browsers and ended up dropping the concept altogehter.
In a nutshell, I’m quite skeptical of negative margins when using a relative sizing element the like the em. Of course, this bears no relevance to this topic other than somebody had asked about using em instead of pixels.
There’s always been a nagging perception that negative margins are bad, and it’s usually because of the painful memories trying anything complicated with them in IE. Throw in a couple of floats and you are in bug city.
Here’s a quick demo showing the wonderful dissappearing text.
I don’t know if this is a specific bug relating to floats and negative margins, or just part of the overall woeful support IE6 has for floats, but it’s annoying nonetheless.
Yes, I had the same problem too. Using ems something goes wrong: what’s the matter? Is there any rule or hack?
I used a negative margin, with a position:relative only yesterday, having never had the need to get such an effect before, but wanting to bring a transparent gif header image over a text/css background colour, I simply gave a -30px top to the header class, et voila. No damage done to the overall document layout.
For me CSS is always about levels of exception: You start with a list of rules and define the exception at an ever increasing detail (within the realms of sanity ofcourse).
@Dan: “I could run into issues if I had elements that sit in multiple colmuns within the content container (and I do on a few pages).”
- But then you have a level of specificity which you can accomodate with a rule, don’t you? Those columns have names…
Nice tip. Thanks for putting into prose what some of us have had in the back of our minds but can’t write in a concise manner.
Design Question Regarding Headings: I’ve often wondered something about headings: If you have a paragraph that is right under a blocky, colored heading, is it more preferrable (aesthetically speaking) to line up the text of the paragraph with the text of the heading, or to line up the text of the paragraph with the edge of the colored block? To my eye, I like the first method better, but I have never heard a designer’s opinion on it.
@Mark #19: I think it somewhat relates to the surrounding elements as well. In Dan’s example images, it would look quite odd if the paragraph text were aligned with the coloured block.
What exactly is a negative margin? I having trouble grasping this concept. Thanks
Mike, negative margin is simply a margin that has a negative value. I am pretty sure I didn’t clarify it any better, but there is really no other hidden meaning behind it. I think to understand it, you just need to try it on practice.
Ethan: Thanks for this comment above.
“So, yeah. Great when you need to articulate something like “move this over sixty percent, but minus 5 pixels.”
I had never thought of using margins with percentages like that. Great comment.
Here’s a more straightforward approach that achieves the same thing:
#content * {margin-left: 25px;}#content h3 {margin-left: 0;}Because of precedence rules (in this case:
*being the least specific selector, it is overridden by any rule with more specific selector that also matches), this would produce exactly the same result.Either approach can be better suited than the other for any particular situation.
Mike-
I’ll give it a stab. Say we’re talking about the top-margin only for an element. Initially we set it to 0px. Now, if we say:
margin-top: 10px;the element will now have a position 10px further down on the page because of the space this margin creates.
Conversely, if we say:
margin-top: -10px;the element will now be 10px further up on the page because of the negative margin created. Maybe that is a clearer way of understanding. But like Ottawa says, trying it is the best way to get it.
Aristotle,
One major problem with that approach is that it can be a bit overreaching… for example, that will add a left-margin to all elements inside #content, not just its immediate descendents. Using the child selector would remedy this, but then it wouldn’t work in IE. The negative margin approach appears to be simpler and more precise.
In order to not have to use margin/padding hacks for IE, I usually never give side margin/padding to div’s but instead give margin/padding to h1, h2, p, etc. That way, there’s already the potential for varying indentation built-in.
That’s what I’ve done on my own site, anyways. I realize this might not be the most time-efficient way to do things, as it takes more fine-tuning. But, on that token – so do CSS hacks.
Hmm so how do you fix the problem in IE? As i have come accross this problem but found no easy solution.
This is so unbelievably cool tip. Thanks.
Great post Dan! I just used this effect the other day to pull some headings over. It completely broke down in all versions of IE. IE just didn’t want to nudge the headers over. Tried a bunch of stuff, but in the end, I used some css filters to feed IE its own styles to work with.
I don’t know it it’s been mentioned but you can also use negitave margins to center fixed-width DIVs horizontally and vertically. I use them for that all the time. :-)
I don’t think that anybody has mentioned this already, but one positive (depending on who you ask) side-effect is that elements that fall outside of the container due to nevagitve margins don’t count towards the total width of the container.
In other words, you can have a DIV set to 750px wide that has some elements that need to stick out due to the design (such as decorative graphics) and for some reason you can’t place it in the background of the BODY or DIV. You can position these with negative margins and have it not affect the DIVs width as far as the browser is concerned.
Why is this useful? No horizontal scroll-bars in some browsers.
I used this technique recently on a site that has some really complicated image layering that was unrealistic to do with background images and that went well beyond 1000px wide.
Thought I share my unexpected finding.
That’s what I use to push photos and notes into the left margin on my blog. It works a treat!
Thanks a lot – a recent design dictated that the entirety of the content section be padded (left) to a certain degree, save for a couple of ‘utility’ links (such as ‘Print Page’, ‘Back to top’) at the bottom which started further back, within the space created by the padding.
One of those things which should be really quick, but various methods I tried didn’t quite hit the mark. This came in really handy and saved me a few hairs!