CSS3 idea: pad-to

I was looking at a grid of links to localised software downloads, each with a 
flag icon next to it. Each flag is a different size, because there is no 
standard aspect ratio to a flag.

So what if there was a pad-to property?

For example, instead of this:

  .image-container { width: 20px; height: 10px }

  <div style="image-container">
   <img ...>
  </div>

You'd just have:

  img.flag { pad-to: 20px 10px }

This would add necessary padding to fit the desired size. All flag images would 
now occupy a defined amount of space.

Pad-to would encompass pad-to-width and pad-to-height.

This would also allow sane vertical and horizontal alignment of any fluid grid 
of images without the need for excessive tags.

This would mostly be applicable to images, as block elements have min-width and 
min-height to provide for this feature. Images, however, need to be padded to 
fit. It would not be exclusive to block elements, but block elements would be 
better off with marge-to ;) (increase margin to fit, so that the border remains 
small)

Received on Friday, 23 February 2007 15:56:13 UTC