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