Re: CSS3 idea: pad-to

David Woolley wrote:
>> You'd just have:
>>
>>   img.flag { pad-to: 20px 10px }
>>
> 
> Why can't you do this by creating a virtual containing block and then
> using auto margins?

Every time I've tried margin: auto before, with a width defined, it's done
absolutely nothing. Oddly, I just tried it now on a paragraph and it worked in
Firefox 2 and IE 6 so ... blargh.


But what is a "virtual containing block"? An enclosing <div>? I find those an
evil necessity best avoided, wasting space and causing clutter and undesirable
maintenance :P

The worst one is when you want a heading, centered, like:

                   [ Here is a heading ]

where only the text has a background colour. Nothing else. But you can't refer
to the text this way:

   h1 > * { color: bar; background-color: foo; padding: 0.2em }

The only way is to make the element narrower, but the text's width is of course
not known and impossible to calculate beforehand. Thus all you can do is this:

   <h1><span>Here is a heading</span></h1>

   h1 { text-align: center }
   h1 span { color: bar; background-color: foo; padding: 0.2em }

Except now you have a freaking span tag to maintain. If you need one inside
every heading of every level, it gets annoying :)

It would be cool if this worked:

   h1 { margin: auto }

But that fails if the width isn't set and, well, the width cannot be determined.
This is where I wish we had a width: shrink-wrap. I know it's possible, as we
get it with display: float and display: inline-block ;-)

Received on Saturday, 24 February 2007 02:36:31 UTC