Re: margins, ems and context

-------- Original-Nachricht --------
> Datum: Wed, 26 Jan 2011 22:41:21 +1100
> Von: Alan Gresley <alan@css-class.com>
> On 26/01/2011 7:30 PM, Niels Matthijs wrote:
> 
> > Well, this is the use case I regularly run into. html first (not actual
> > code, just a little abstraction of what I commonly write):
> >
> > [div class="whatever"]
> > [h1]my header[/h1]
> > [p]some paragraphs[/p]
> > [ul]...[/ul]
> > [div class="more"][<a href="#"]read more about whatever[/a][/div]
> > [/div]
> >
> > for the css, I set my basic layout grid like this:
> >
> > ..whatever>* {margin:0.75em 1em;}
> >
> > There you have your left and right em margins on the h1 heading. Now if
> > you start fiddling with the h1 font-size it will start jumping around,
> > which is not very cool, destroying the vertical grid I've just created.
> 
> 
> The h1 heading has a default font-size of 2em. 

Is this reliable? I think of user stylesheets, or older browsers, which might apply other default font-sizes?

> Try this test and the solution to your problem.
> 
> <!DOCTYPE html>
> 
> <style type="text/css">
> div * { margin: 0.75em 10em; background: lime; }
> div h1 {margin: 0.75em 5em;background: lime; }
> </style>
> 
> <div>
>    <h1>heading</h1>
>    <p>paragraph</p>
> </div>
> 
> 
> Now if you have fiddled with the font-size of your h1 heading, then you 
> need to do the maths. Let's say your h1 heading is font-size 150%.
> 
> 200 / 150% = 1.33r x 5 = 6.66
> 
> 
> <!DOCTYPE html>
> 
> <style type="text/css">
> h1 { font-size: 150%; }
> div * { margin:0.75em 10em; background:lime; }
> div h1 { margin:0.75em 6.66em; background:lime; }
> </style>

This kind of stylesheet is very hard to maintain. If after a year your designer tells you to change the margin, and your stylesheet is long and complicated, you might start sweating. This is a general problem of relative units.

As long as the rem unit is not broadly supported you might want to find an alternative solution, such as applying a padding to the parent container instead of left and right margins to each element, or stick to non-relative units such as px.
-- 
Neu: GMX De-Mail - Einfach wie E-Mail, sicher wie ein Brief!  
Jetzt De-Mail-Adresse reservieren: http://portal.gmx.net/de/go/demail

Received on Wednesday, 26 January 2011 14:28:26 UTC