OT: CSS

Fri May 7 13:11:35 EDT 2004

le 07.05.2004 11:11, use-revolution-request at lists.runrev.com à
use-revolution-request at lists.runrev.com a écrit :

> 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?

That's where CSS proves to be REALLY cool !

Put this in the header of your HTML document :

<

<html>
<head>
<title>Document sans titre</title>
<style type="text/css">
<!--
h4 {
    margin-bottom: 0px;
}
p {
    margin-top: 0px;
    margin-bottom: 0px;
}
-->
</style>
</head>

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

You may as well specify relative sized margins...

+------------------------------------------------------------------+
|                                                                  |+
|   00  00000   00000  00      00                            00    ||
| 0000 00   00 00   00 000    000                           00000  ||
|   00 00  000 00  000 0000  0000  00000     00 000   00000  00    ||
|   00 00 0 00 00 0 00 00 0000 00 00   00    000  00 00   00 00    ||
|   00 000  00 000  00 00  00  00 00   00    00   00 0000000 00    ||
|   00 00   00 00   00 00      00 00   00 00 00   00 00      00    ||
|   00  00000   00000  00      00  00000  00 00   00  00000   0000 ||
|                                                                  ||
| ---------------------------------------------------------------- ||
|                                                                  ||
|    Email -> 100mo at 100mo.net  +  URL -> http://www.100mo.net      ||
|                                                                  ||
+------------------------------------------------------------------+|
 +------------------------------------------------------------------+