A few months ago I spent a long weekend cursing margins and padding and css layout and computers and also Google (*gasp*). The reason I was practicing my invective was about 12 pixels of innocent space that decided to take up residence between my header and my content. It was definently NOT supposed to be there. The div above it had zero margins and zero padding. The div below it was likewise zeroed out. I checked everything from font size to line spacing. I eventually deconstructed my entire page and commented out every style in my style sheet and then painstakingly reapplied everything only to have that damned space show up as I uncommented the last style.
Ok… no problem.. I can’t be the first person in the history of the internet to have this problem right? So in a fit of genius, (which is the fit I have most often) I turned to my dear reliable search engine. After googling everything from “overflowing box model” to “stupid space won’t go away” I had about half a handful of articles. The ones that were exactly related to my problem were all written before the age of dinosaurs (around 1998) and the rest were random references to the original CSS definitions over at W3C.
Thanks to some wonderful individual I finally managed to muddle through the problem. I would give you his link but my firefox profile crashed last week destroying all of my bookmarks… but that’s another story. Anywho… I vowed to write an article documenting my box model woes so that no one else would ever spend a weekend staring at something that shouldn’t be there. But then Futurama came on.
Months later (as if he were reading my mind) the illustrious Eric Meyer did a much better job than I would have ever done – even if I weren’t a lazy bastard. I figure that since he did all the work, the least I can do is try to bring it to the attention of Google.
So go read Uncollapsing Margins over at Complex Spiral. Save yourselves.