Re: [css3-box] padding: auto

On Mon, Jul 16, 2012 at 4:15 PM, Tab Atkins Jr. <jackalmage@gmail.com>wrote:

> On Mon, Jul 16, 2012 at 4:07 PM, Lea Verou <leaverou@gmail.com> wrote:
> > A common visual design pattern that has emerged in the past few years is
> the
> > content area having a fixed width, with the background extending to cover
> > the entire viewport width. Here is a quick list of websites doing this:
> > http://lesscss.org/
> > http://www.opera.com/
> > http://www.mozilla.org/
> > http://www.kaleidoscopeapp.com/
> > http://daneden.me/type/
> > http://www.alfredapp.com/
> > http://grabaperch.com/
> > http://twostepmedia.co.uk/jsquery/
> > http://whiteboard.is/
> >
> > For given viewport dimensions, this could be done by adjusting the left &
> > right padding to be equal to (viewport width - width) / 2. However,
> > viewports are not fixed, and therefore authors almost always resort to
> using
> > a wrapper element for the content, with fixed dimensions and margin:
> auto,
> > and assign the background to its parent element. calc() enables this to
> be
> > expressed in pure CSS with something along the lines of:
> > width: 20em;
> > padding: calc(50vw - 20em / 2);
> >
> > This is certainly an improvement, but still suboptimal. Not only it’s not
> > very readable, but the width needs to be duplicated or assigned to a
> > variable to keep the code DRY. Given that this is not an isolated case,
> but
> > an incredibly common pattern, I believe it should be addressed by
> something
> > more straightforward.
> >
> > Basically, what’s needed is an `auto` value for padding, that makes it
> > behave as `auto` does for margin. In the latest ED there *is* a new
> `auto`
> > value allowed for the padding properties [1], but the way it’s supposed
> to
> > work is not explained anywhere.
> >
> > [1]: http://dev.w3.org/csswg/css3-box/#the-padding-properties
>
> An alternative way to do this would be to have a way to opt-in to
> <body>'s special handling, where its background gets hoisted to the
> canvas.  That's how you achieve this effect when you're not varying
> the background within the page.
>

Doesn't justify-content:center achieve the desired behavior just fine?


>
> ~TJ
>
>

Received on Tuesday, 17 July 2012 15:46:08 UTC