I understand that it’s supposed to be those one-off solutions using some arbitrary number to make the layout work.
But how about when you need to use “margin-top: -32px” (for example) for an element that needs to overflow outside the box? Think about a paperclip image that needs to be positioned with seemingly arbitrary numbers as a design element to a specific div box. Is this considered a “magic number” too?
Or let’s say you have a main-content block and for styling purposes, you like this to overlap the top section a bit so you add again “margin-top: -20px;”. Like in this image:
This is a great question. I’d say in the example case it’s not a magic number. It’s a specific design choice, like any other positioning or spacing. To me magic numbers are more related to “fixing” problems. They are also often related to fonts as well. Not just directly font-size or line-height or whatever specifically but anything that is affected by those things.
**chriscoyier:** Yes, a blog entry about magic numbers would be nice for discussion’s sake and clarity. ;)
But given some of the examples, I now have a clearer notion of what magic numbers are. As I understand it, magic numbers are used as a fix when there could have been a more proper way of achieving a specific layout.
In my example, it isn’t a magic number because that’s the only way it could have been achieved (whether using _margin-top_ or _top_) and the layout won’t necessarily break if I remove that number.
What Chris said. Magic numbers are values that are used in response to a problem because they “just work”. If you KNOW that you want the element to be exactly 32px higher, that’s not a magic number; it’s a design choice.
It’s similar to !important…if you KNOW you never want something to be overridden, it’s fine to use. But if you use it to fix a specificity problem, things can get messy.