Using margins to create good page flow?

Should we use margin-top, margin-bottom, or both?

[dominicc]

Browsers seem to use a mix of both margin-top and margin-bottom for the standard elements like h1, h2 and p, relying on collapsing margins, and producing typographically poor layouts.

DTP packages and high-end word processors on the other hand seem to go for a pure margin-top approach, can produce excellent layouts with no manual tweaking, but have the intelligence built in to cancel the lead margin on each page (MS Word does work this way, and suffers for it).

I have tried on a couple of occasions to create a generic stylesheet with attractive pagination, but always run into the problem that I can not find a generic way to cancel the lead margin for any particular content area.

What do others do here? Is their some best practice I can use in this situation?

[GaryK]

I'm not sure I understand your question completely but I'll take a stab at it since nobody else has and I know how it feels to have an unanswered question here.

One technique I use to control leading at the bottom of each page is to create a sub-class (is that the right term) for the P element. Something like p.no-height { margin-bottom:0; }. This works great if you have that sort of control over the output. I suppose the same method could work to control the top margin.

I hope I understood you correctly and that suggestion will work for you. Other than that your best bet would be to try and attract DrDoc's attention as he seems to be our resident CSS expert. I know he's helped me a few times.

[your_store]

Sounds like you want to use adjacent sibling selectors, but of course they don't work in IE for Windows. What these selectors do is they allow you to give a property only to elements that follow a certain element. For instance, to a top margin only p's that follow a h1, you do the following:

h1 + p {
margin-top: 1em;
}

[DrDoc]

A couple of questions:

generic stylesheet with attractive pagination

Are you talking a print style sheet, or just regular screen layout?

cancel the lead margin for any particular content area

You only want to cancel the top margin for the first element in any given area?

---

There are a couple different things you could do:

1) Completely define your own margins for all main elements (headings and paragraphs, for example). If you want to make sure that you control the margins (without relying on the browser's ability to collapse the margins) I would recommend setting the top margin to zero, and the bottom margin to whatever you desire.

2) There is a way of giving only the first child element different styles. You may already have guessed it -- p:first-child would apply different styles to a paragraph if, and only if, it is the first child of the parent element. Of course, this approach doesn't work in IE.

3) There are quite a few bugs related to margins, especially a particular browser's inability to collapse them correctly, affecting surrounding elements in a way they shouldn't. If this is a problem for your particular layout, why not just dump the margins alltogether? Use paddings instead! The paddings are never collapsed, so you would have to use a class on your first or last (or both) element if you want the padding canceled. Paddings are much more reliable than margins. The only problem, however, is IE's broken box model. So watch out for that when planning your paddings (goes for margins as well).

4) Use classes. Of course, this approach is more of a hassle, and maybe not as smooth as the above. It may also be overly complicated to implement on highly dynamic pages. However, it seems to be the most reliable method. If everything else fails, this may be what saves you.

Thanks GaryK for bumping this thread up ;)

[dominicc]

Thanks everyone for replying. Been so busy that I have not had time to reply myself. Sorry about that, I do appreciate the help! I think everyone's suggestions were very useful, but unfortunately I used far too many words, and still managed to confuse everyone. Really must practice being more concise.

Comments to everyone are below. The short version is that I think my problem is unsolvable by CSS alone. So, I started a javascript off with the intention of fixing up buggy browser implementations by reading the stylesheets from javascript and mangling the HTML and/or CSS to get the job done. This is a nice idea in theory since it should work on IE5+, MacIE5, and some old Opera browsers. In practice there are limits to what can be done, and compromises must be made. I started off a Sourceforge project with a script that allows CSS content insertion, CSS tables, and first-child support (of sorts). Very early days. and only tested in IE6 so far, but if you fancy a laugh you can get it here [sourceforge.net].

GaryK: thanks for bumping the thread. Your suggestion would normally work except that I am not in control of the HTML. Of course I completely failed to mention that. We have a portal like system for estate agants that is intended to be used for many clients, each with their own skin, options and content -- a bit like Nuke for estate agents I suppose!

your_store: your suggestion is about getting nice pagination in general I believe, and I already use that technique to improve things for those who choose not to use IE. You can indeed create really nice flow using the following sibling selector to provide contextual spacing; e.g. paragraphs have 1em lead-in except when they are following another paragraph and they have 0.5em lead-in. This is good because it does not suck for IE users, just not as nice.

DrDoc: you're quite right; there's more than one way to skin a cat. I always redefine the margins and padding for all HTML elements since I don't like the way it comes out of the box, and I don't appreciate the variation between different broswers. Regarding the first-child selector, yes that is, IMO, the one true way. Of course not working for 90% of users is a complete bummer! Damn I'd like to crush those IE users for runining my life.

Also, thanks for the padding tip! I was debating this since the margin rules cease to work when I have no choice but to put content inside table cells. Padding always works here, and I did not consider this other advantage.

Thanks again, Dominic