Posted by Safalra (Stephen Morley) on 10/26/07 18:29

On Fri, 26 Oct 2007 18:57:41 +0100, Dylan Parry wrote:
> Thomas Mlynarczyk wrote:
>
>> Indeed, the baseline grid version looks much better. There is, however, one
>> little detail that disturbs me: The space between a heading (like "Tempor
>> justo") and the following paragraph is smaller than the space between two
>> paragraphs. This gives the optical impression of the heading referring only
>> to the first paragraph below it, instead of to all following paragraphs
>> until the next (same-level-) heading.
>> [...]
>
> The solution is merely to change the top and bottom margins for H3
> elements without breaking the baseline grid. It's an easy enough process
> and just shows that I can make oversights :) I'd actually forgotten to
> set a bottom margin for the H3 elements, but included a padding that
> shouldn't have been there. I've now corrected this in the demo.


Implementing a baseline grid can be more work than it first appears (I was
surprised to see '10 minutes' as the estimated time in the .net magazine
article which I presume was Dylan's inspiration). Lists are one example of
something that can be tricky, especially when they can be nested. I use the
following rules on my own site:


dl{
margin:0 2em 1.5em;
}

ol{
margin:0 2em 1.5em 3em;
padding:0;
}

ul{
margin:0 2em 1.5em;
padding:0;
}

ol ol,
ol ul,
ul ol,
ul ul{
margin-right:0;
margin-bottom:0;
}

dd{
margin-left:2em;
}

dd,
dt,
li{
line-height:1.5em;
}


The 2ems occur in horizontal units because once you take into acocunt the
1.5em line-height, the actual vertical gap between elements is roughly 2em.


--
Safalra (Stephen Morley)

Web Typography:
http://www.safalra.com/web-design/typography/

[Back to original message]