Our book:
Defensive Design for the Web: How To Improve Error Messages, Help, Forms, and Other Crisis Points
Available Now ($16.99)
Most Popular (last 15 days)
Looking for old posts?
37signals Mailing List
37signals Services
Syndicate
Resetting Margins and Padding
13 Jan 2005 by Matthew Linderman
Resetting all margins and padding, a method discussed at leftjustified.net, gives you complete control over styling and positioning semantic elements. Add a global { padding:0; margin:0; } and you can then apply padding and margins where you see fit instead of relying on browser defaults.
Now we have the basis for a site whereby all side margins are controlled by browser width and all vertical spacing is controlled by font size. Quick, simple and highly usable this could easily be used as the basis for a solid but highly flexible fluid layout.
10 comments so far (Post a Comment)
13 Jan 2005 | Brian Drum said...
With regards to the select issue on Firefox, Ive been trying out solutions and this one seems to work the best:
option { min-width: 1.5em; }Rather than adding padding to all option lines whether they need it or not, using min-width will only affect the small select boxes that need it, plus it will be ignored entirely by browsers like IE that dont support it and arent part of the problem in the first place.
13 Jan 2005 | Bob said...
Here's the one I use:
*/* */ {color:inherit;font:inherit;margin:0;list-style:none;padding:0;text-decoration:none;}
The weird comment hack hides it from Mac IE, which seems to have issues with this sort of thing. But using the rule makes development MUCH faster.
13 Jan 2005 | Joshua Kaufman said...
I didn't want to be the first one to say this, but like, duh. I might not be reading this correctly, but isn't this common sense?
14 Jan 2005 | Jonny Roader said...
Joshua, if this is common sense, then I really have a *lot* to learn about CSS. ;)
14 Jan 2005 | Andrew Krespanis said...
"I might not be reading this correctly, but isn't this common sense?"
That's what I thought too. After 6 months of sharing this trick with beginners on codingforums.com, I figured maybe it was worth sharing on a larger scale.
Brian: I'm sorry I never got around to adding your 'option' fix for FF -- I'll get onto that asap. Thanks, btw.
P.S - BASECAMP ROCKS! Sorry, couldn't help myself :)
14 Jan 2005 | Geoff said...
I don't really like using blanket methods like this. Many HTML elements have very useful default properties that can make it easier for you to style them. doing this just forces you to style everything, which could mean much larger css files, or some beginners might not grasp the semantic meaning of some elements if they don't learn how the 'naked' element behaves.
14 Jan 2005 | Jeff with a J said...
I read the post on leftjustified a couple months back and had one of those "why the f**k didn't I think of that" moments. As for it being obvious...I'm sure everything is obvious to someone. And for Geoff with a G, read the article on left justified. It's not just about this one blanket statement (but you can stop there if want), Andrew goes on to then immediately redefine the (most used) default tags. It's not about ignoring how these 'naked' elements behave, it's about making the naked elements behave the same way across many browsers.
14 Jan 2005 | Darrel said...
I agree with Geoff. Nothing WRONG with this method, but it seems like more work. I don't mind a slight variation amongst browsers usually. But, of course, it all depends on the particular site you're working on.
16 Jan 2005 | stonegatherer said...
17 Jan 2005 | Marion said...
I think the article was cool for it certainly gives you a foundation for setting default margins and padding. However, I would like to see something that details the difference between the main browers (FF and IE) w/ regards to margins specifically. Setting margins directly is cumbersome, for both browsers render heights/widths differently and I find that in order to have the most control you have to capitalize on the use of dynamic padding.
