Comments on: Global White Space Reset

By: 3e6.com

3e6.com — Tue, 03 May 2005 12:22:53 +0000

This tip is useful beyond words. My head started to ache when considering the many hours I’ve spent wrangling the magical mixture of margin and padding across browsers. Thanks for sharing!

By: Andrew

Andrew — Thu, 17 Mar 2005 21:54:39 +0000

Mark: The reason for this choice is that using ‘%’ for horizontal spacing creates variable width ‘gutters’ that adjust to suit the browser width, while using ‘em’ for vertical spacing ensures the font-size, line-height and vertical padding/margins all increase proportionately to each other.

By: Mark Pearson

Mark Pearson — Thu, 17 Mar 2005 20:46:13 +0000

   1. * {
   2. padding:0;
   3. margin:0;
   4. }
   5. h1, h2, h3, h4, h5, h6, p,
 pre, blockquote, label, ul, ol, 
dl, fieldset, address { margin:1em 5%; }
   6. li, dd { margin-left:5%; }
   7. fieldset { padding: .5em; }

...whereby all side margins are
 controlled by browser width and
 all vertical spacing is 
controlled by font size.

So, my question is, why have some units in em and others in % and why use em for vertical spacing and % for horizontal?

This also illustrates the importance of understanding the theory of CSS

By: Peter Odding

Peter Odding — Wed, 16 Mar 2005 14:23:18 +0000

“By removing this “mystery” dimension from the size of elements, it could help people to become accustomed to styling semantic HTML.”

I guess that doesn’t count me in.

I’ve been creating/using CSS layouts for over two years, and the first thing I do when I want complete control of my layout is set all margins and paddings to zero.

I’ve also created a common stylesheet that I import to reset these margins / paddings and then apply some general whitespace, e.g:

table, ol, ul, dl, p, pre { margin-bottom: 1em; }
ol, ul { margin-left: 1em; }

etc…

I’d absolutely recommend this technique to anyone who wants complete control!

By: Ivan

Ivan — Wed, 16 Mar 2005 11:42:42 +0000

Hey, great thoughts everyone! But aren't we left out the select optgroup and select option? Here's my suggestion:

select {
    min-width: 1.5em;
}

select optgroup {
    margin-left: 2%;
}

select optgroup option {
    margin-left: 10%;
}

By: Tzvetelin N.

Tzvetelin N. — Tue, 08 Mar 2005 17:41:58 +0000

yo!