On Mon, Jul 18, 2011 at 02:21:59PM +0100, Simon Ransome wrote:
On 18/07/11 12:39, Chris G wrote:
Further, possibly simpler, related question.
How can I set things up using CSS such that:-
Paragraphs snuggle fairly close up under headings, I want them to be obviously associated with the heading above them, the default setup seems to make them closer to the heading below which seems all wrong to me so I habitually reduce the top margin for paragraphs and increase the bottom margin. Lists have the same spacing below headings that paragraphs do, simple enough by setting the margins the same. ... and this is the difficult bit, I want a list below a paragraph *not* to have a huge vertical space.When you want to mess around with things like this, it's generally best to first make sure you declare the margins (and padding for some) of all block-level containers yourself, just so that you kow exactly where you are. Then, overruling them in these sorts of cases can be achieved using CSS's "adjacent sibling" rules.
If you have CSS like this:
h1 { margin: 0; padding: 0; } h1 + p, p { margin: 5px 0 10px 0; padding: 0; } p { margin-top: 10px; padding: 0; } p + ul { margin: 5px 0; padding: 0; }
and HTML like this:
<h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> <ul><li>list 1</li><li>list 1</li></ul>
e.g. all paragraphs have a margin of 10px 0 10px 0 (using inheritance), but those adjacent to an h1 have only a top margin of 5px, moving them closer.
Then you should get something close to what you're looking for (subject to tweaking numbers, natch). The "+" in "h1 + p" tells the layout engine that that particular style should apply only to adjacent siblings of a particular parent. At this level, all these elements are siblings of "body", but only the first para after an h1 is adjacent to i1, as is only the first list after any paragraph.
Brilliant, I didn't know about that '+' syntax in CSS and it's *exactly* what I need. Thank you! :-)
You can of course leave the default margins and use -ve values instead, but as "adjacent siblingness" is buggy on Safari and non-existent on older version of IE, messing with -ve margins is more likely to be fraught with inconsistencies across browsers.
It's virtually only for my own use (Firefox nearly always) so -ve margins might be acceptable. I think it should be possible without such nasties though.
Anyway, thank you again, and I'm off to read up about "adjacent sibling" rules in CSS.