Re: margins, ems and context

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

<div>
   <h1>heading</h1>
   <p>paragraph</p>
</div>


This table needs to be updated from pixels to ems but is a guide for 
default font-size for headings. See final styles.


<http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm>




-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo

Received on Wednesday, 26 January 2011 11:42:59 UTC