Re: margins, ems and context

On 26/01/2011 18:51, Alan Gresley wrote:
> On 27/01/2011 3:49 AM, Anton Prowse wrote:
>> On 26/01/2011 09:30, Niels Matthijs wrote:
> How can any approach that can work be wrong?

This point of view more is pretty much the main reason why there is so 
much bad CSS out there.  Just because a technique appears to solve the 
problem in the narrow case under consideration at any given time, that 
does not mean that it's the right technique.

This is amply demonstrated by the particular case we're discussing.  (In 
your example, the fact that you've had to do some correcting maths to 
get thing to work is the tell-tale sign that there's something adrift 
with the approach being used.)  For example, your approach doesn't solve 
the fact that a blockquote added to the container has now lost its 
horizontal margins specified by the UA stylesheet.

In this particular case, the rule is that padding on the container 
specifies the "default" offset of the container's content from its 
border, whilst margin on the container's content is for exceptionally 
obtaining a different offset.

Another common CSS anti-pattern is when an author thinks that horizontal 
padding and horizontal margin are interchangeable on an inline-level 
element since they both appear to create an offset of that element from 
its neighbouring inlines.  The flaw in that thinking becomes obvious 
when the need arises to add a border to the inline.


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

OK, I'll bite.  Why would you have a 100%-wide float?  (The fact that 
any padding on the container would mess that up is, again, the tell-tale 
sign that something's gone awry with the layout architecture.)


> 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

Markus' main point was correct: the horizontal-margin-on-everything 
technique is very hard to maintain.  However, that has nothing to do 
with relative units, despite his claim.

> and almost everyone saying
> that you can't use em or %. Nonsense.

I'm not aware of anyone saying that apart from Markus.


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

The question remains: why would you choose to use float with 100% width 
there, given that you've explained the drawback of such an approach? 
That's a perfect example of the wrong technique being used because it 
appears to visually solve the problem in the particular narrow case 
under consideration at that moment in time.

Cheers,
Anton Prowse
http://dev.moonhenge.net

Received on Wednesday, 26 January 2011 18:42:34 UTC