views:

113

answers:

3

I've come across various posts where people are stating that negative margins are hacks. Thus I've strayed away from using them with exception to particular cases when I can justifiably use them, like throwing text off the screen with margin:-9999px

Question, are negative margins a hack and when is it right to use negative margins? I've seen them used in the 960 Grid System with, .push and .pull, any other cases where they are justifiably usable?!?!

+7  A: 

I would argue it's not a hack: It's defined, logical behaviour; it's supported in all browsers; it can be expected to be supported in future versions of browsers (the absence of future support is the most important argument against hacks).

Also, as @durilai points out, they are officially sanctioned (although with limits) by the W3C.

This Smashing Magazine article supports the case.

Pekka
+1 nice article on the topic...
Alexander
+10  A: 

Negative margins are allowed based on W3C specifications. I have used them to let things overhang their container.

Dustin Laine
I'm out of votes, but conformance with W3C specs is one of the most important arguments...
Pekka
Underlined by the comparison of the specifications of margins and borders (which cannot be negative)
David Dorward
A: 

I suspect they've been labeled as a hack because of inconsistent browser behavior.

Whenever possible I use position: relative and negative top and left values to pull elements into new locations. This isn't possible for every case, but I find it behaves more consistently in all the Internet Explorer flavors.

Pat
-1 What inconsistent browser behaviour are you referring to?
Tomas
@Tomas this one jumps out: http://haslayout.net/css/Negative-Margin-Bug. Mainly what I'm getting at is that to use them, you generally have to apply another hack to get consistent display in IE6/7. This doesn't necessarily label the negative margin as a hack, but has given me enough reason to avoid using them whenever possible. I've found the easiest way to get x-browser display is to rely on rock solid, simple CSS (position and floats with width defined).
Pat