Re: margins, ems and context

On 25/01/2011 7:08 PM, Anton Prowse wrote:
> The example on your blog:
>
> "when you're playing around with headings and the left and rights 
> margins of the heading box keep changing every time you adapt the 
> font-size of this heading"
>
> makes me question why you've got horizontal margins on your heading in 
> the first place, or at least, why you're defining them in ems.
>
> Can you provide a use case, that is, not just an example of what 
> happens but also an explanation of why, specifically, you don't want 
> that to happen and why you want something else to happen instead.
>
> In particular, why would having those horizontal margins dependent on 
> the font size of the containing block be useful?
>
> Cheers,
> Anton Prowse
> http://dev.moonhenge.net

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.

What I usually do is add a [span] in each heading so I can change the 
font-size on the span rather than the h1. Of course you can argue that I 
could set my horizontal margins in px rather than ems, but I prefer a 
fully proportional scale.

Note that the grid is dependent on the parent, not the element itself 
(which should the case anyway, a component should never position itself 
to its context, a context should decide how a nested element is 
positioned. In this case, things would be much easier (and more logical) 
when the em-unit for margins would be taken from the parent (.whatever)

Hope this clears things up a little :)

Greets,
Niels Matthijs
http://www.onderhond.com

Received on Wednesday, 26 January 2011 08:29:21 UTC