OT: CSS--Kill extra vertical space in block elements

Sannyasin Sivakatirswami katir at hindu.org
Fri May 7 01:25:46 EDT 2004


I build widgets with Revolution that output HTML for different 
contexts. No better told for that for sure!

Forgive me for going way off topic here, but no better pool of minds to 
draw from than the Rev family ;-) I just couldn't help myself...

  I'm just getting into CSS, it's great.. and I have one challenge I 
can't solve.

It is the universal default that block elements apply extra padding top 
and bottom... i.e. extra vertical white space.

  Coming from a print world

<h4>Learn about Tropical Fruits<h4>
<p>A paragraph about tropical fruits</p>
<p>Another paragraph about papayas</p>

Should all have no extra space between them unless the designer 
specifically declares it with a a space before or after value applied 
to the paragraph formatting. And of course there is some minimal auto 
leading set as a percentage of the M height of the current font size.

  I always cringed in web development when <h> elements forced a gaping 
horizontal "hole" across the page... in effect, it appears as the 
insertion of an unwanted blank line.... and was hoping with CSS there 
would be some way to overcome the extra vertical white space added to 
all block elements...

Of course, one can do stuff like this:

<p>A paragraph about tropical fruits<br />
<p>Another paragraph about papayas</p>

but then you lose separate style control over the two lines... email me 
off list if you know of a solution or a place to go on the web to find 
it... I have Dan Schafer's great book, HTML Utopia: Designing without 
Tables using CSS... but I can't get any combination of properties to 
"kill" the block elements' extra vertical default padding. The "height" 
property is too inflexible... because the content is dynamic and a 
single height value won't work if e.g. the text suddenly goes to three 
lines instead of two.  I was hoping  line-height=1 would work, and act 
like a print document layout program would=-provide the vertical white 
space required by the font height and no more. But, no go.

I'm guessing browsers have some kind of super high value for block 
element "auto-leading" that was established in the early days of the 
web  and the question is how to defeat that?

TIA

Sannyasin Sivakatirswami
Himalayan Academy Publications
at Kauai's Hindu Monastery
katir at hindu.org

www.HimalayanAcademy.com,
www.HinduismToday.com
www.Gurudeva.org
www.Hindu.org



More information about the use-livecode mailing list