W3C home > Mailing lists > Public > www-style@w3.org > January 2011

Re: margins, ems and context

From: Anton Prowse <prowse@moonhenge.net>
Date: Wed, 26 Jan 2011 17:49:48 +0100
Message-ID: <4D4050AC.2050302@moonhenge.net>
To: www-style@w3.org
CC: Niels Matthijs <niels.matthijs@internetarchitects.be>
On 26/01/2011 09:30, Niels Matthijs wrote:
> 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;}

Why would you attach horizontal margin to all children of a block 
instead of using horizontal padding on the block itself (which is 
precisely what padding is intended for)?

This is going to cause you a real headache, especially if you try to add 
children which themselves come with margin by default (in the UA 
stylesheet) such as blockquote or sometimes lists.

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

Precisely.  This is why horizontal margins on children is the wrong 

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

I don't think that ems vs px (or flexible vs non-flexible) is the issue 
here.  The problem that you've run into is simply a consequence of an 
"inappropriate" technique being used higher up the process.

(For what it's worth, I see this "error" pretty frequently.)

Anton Prowse
Received on Wednesday, 26 January 2011 16:50:25 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:55 UTC