Padding on top/bottom, margin on the sides

[joebert]

October 6th, 2009, 1:27 pm

After once again having fun with vanishing container backgrounds above elements, margins on the bottom being ignored, padding making boxes wider, and things I've torn out of my brain on the ends of hair follicles, I had a thought.

What if on the top and bottom of an element, I only use padding, never margin ?
For the sides of elements, I'll only ever use margin, never padding.

Does this sound like a good thing to do ?

[UPSGuy]

October 6th, 2009, 1:34 pm

Padding plays funny games with IE (box model), but nothing a few !important's can't fix when needed, if you don't mind them.

[graphixboy]

October 6th, 2009, 1:53 pm

that works fine unless you also use a height... the IE box model is messed up both height and width but otherwise you shouldn't have too many problems with it. The biggest issue will occur in areas where you really need BOTH margin and padding. For example a textarea that needs to have inner padding and outer margin...

[joebert]

October 6th, 2009, 3:14 pm

Well I'm going to give it a whirl in my current personal project. I'll report back with my experience after I've reworked some stuff.

I've got two things using a height. The header, and the navigation bar directly below the header. Both currently have padding, border, and margin zeroed. Everything else just floats around and "goes with the flow".

[joebert]

October 6th, 2009, 8:38 pm

So far so good. Sticking with this crude rule of thumb is forcing me to wrap some things in what seems like an extra <div>. Everything's snapping into shape in all 4 browsers though.

October 25th, 2009, 5:16 am

maybe working with tables that have padding will help? i have found tables really useful to insert all the elements of a page.

[joebert]

October 25th, 2009, 5:39 am

Nah, no tables.

It's been working out well for me to use this odd rule of thumb for elements with a block display. I've been making exceptions for padding on other elements though. Things like spans, links, images, etc.