Re: margins, ems and context

On 26/01/2011 5:49 PM, Anton Prowse wrote:
> 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)?

A fair question, which I once asked myself too. The result was a five 
part article:
http://www.onderhond.com/blog/onderhond/margins-paddings-recap

I assume what you're suggesting is the following:
..whatever {padding:0em 1em;}
..whatever>* {margin:1em 0em;}

What I don't like about this solution (in short):
- the spacing of an element gets distributed over two different 
selectors, which hampers ease of maintenance
- if (and it's not uncommon) you want a visual heading attached to the 
sides of the box you need to specify negative horizontal margins the 
same width as the horizontal paddings on its parent.

..whatever>h1 {margin:0 -1em 1em -1em;}

That is, if your h1 has the same font-size as its parent, if not 
calculating (and rounding) hell ensues. To each his own but for me this 
is not acceptable. The solution I use is built from 1 single line of css 
and has maximum flexibility for each child, independent of its parent.

With all due respect, I appreciate the help with css that's given here, 
but like others have pointed out before, that's not really the purpose 
of this mailing list. I think my example is simple and clean enough. If 
that's not the case I'm glad to make a live example, or you could check 
the articles I've written on paddings and margins which should aptly 
explain what's bothering me and how my original question ties in with that.

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

Received on Thursday, 27 January 2011 08:13:19 UTC