Re: margins, ems and context

On 27/01/2011 3:49 AM, Anton Prowse wrote:
> On 26/01/2011 09:30, 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;}
>
> 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)?


I have used this technique.


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


How can any approach that can work be wrong? I have even added the 
reason why the margins are out and the solution to this design issue in 
this thread.


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

What happens if you have any element (container) with a width in pixels, 
ems, percent and one of the children is a float that has the width 100%. 
Any padding given to the element (container) would cause a horizontal 
scroll bar. How often are floats given as width of 100%? I would say 
that it is common.

This whole thread and that other thread (align property) has sent this 
list crazy tonight. It's turned into a help list and way off topic. Here 
I have Markus advising on how to code CSS and almost everyone saying 
that you can't use em or %. Nonsense.

Here is a demo that uses only uses em and %.

<http://css-class.com/test/css/3/expanding-tabs-with-transition.htm>


Works fine in most browsers (including IE6) and the menus are floated 
and have a width of 100%.


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

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

Received on Wednesday, 26 January 2011 17:52:20 UTC