Margins vs padding for typography - best practice?

HTML & CSS
1

Just looking to know, when setting up headers and paragraphs etc, what is the best way to approach whether to use padding or margin for the space between. Collapsing margins make me think margin would be the way to go, but I’ve seen a few articles online stating that you want to go with padding. Obviously if the background of the text is different from the background of the rest of the page you’d want a combination of both based on appearance… just looking for some advice here as it’s something I’m always not really sure of when coding a design.

2

Padding is the space between the content and the border. Margin is the space added after hte border. Margin generally is the best wya to go spacing things out. I prefer to set my margins in 1 direction that way if I do all margin-bottoms I can avoid margins collapse. You should really never use padding to have distance between items. That’s what margins are for :).

3

Margin collapse is ‘inescapable’ at some point down the road, especially using frameworks.

<div class="obj">...</div>

<div class="obj-2">...</div>

<div class="obj">
	<div class="obj-2">...</div>
</div>

.obj, .obj-2 { margin: 0 0 20px; }

I would categorize margin and padding like so:
margin - layout
padding - typography

4

I’ve wrestled with this one in the past, I haven’t found a set and forget solution that works everywhere, i’ve always needed to tweak them in certain places. Let me know if you find the one-best-way.
The browser default style is an equal top and bottom margin to these elements.

I have generally opted for a bottom padding of 1em so that I can align things to the top of different elements without worrying about varying spaces at the top of these elements.

5

If I wanted to avoid margin collapse in my former example, I could do something like this:

.obj, .obj-2 { margin: 0 0 19px; padding: 0 0 1px; }

On the flip side:
Margin collapse can be a wanted effect at times.

6

I would say that margin-collapse is the desired effect the vast majority of times. It’s just that when it happens, and you weren’t expecting it, it creates an obvious breakage.

The more aware we become of the way it works, the more natural it is to deal with it without special thought, as we might deal with lint indentions. There are still hasLayout anomalies in older IEs; that’s the x-browser burden we have to shoulder until IEs <8 go away.

cheers,

gary

7

I do… p/h1/etc {margin:0 0 1em} and I’ve been leaning towards a pixel line height lately.