Add margin-x and margin-y properties (same for padding and border-*)

• From: Marat Tanalin | tanalin.com <mtanalin@yandex.ru>
• Date: Mon, 16 Jan 2012 02:20:45 +0400
• To: www-style@w3.org
• Message-Id: <398341326666045@web92.yandex.ru>

Hello. It would be nice to have ability to specify vertical and horizontal margins, paddings, and border-* subproperties once, without need for duplicating same value in separate subproperties like margin-top/margin-bottom.

Vertical margins are margin-top and margin-bottom. Horizontal margins are margin-left and margin-right.

For example, vertical margins (paddings, border-width, border-style) are _very often_ specified equal. Currently we are forced to inevitably specify same value twice:

    .example {
        margin-top:    1em;
        margin-bottom: 1em;
    }

It makes sense to introduce more elegant syntax:

    .example {margin-y: 1em; }

One could argue why not just specify it as {margin: 1em 0}? Answer is that it's inappropriate if we need to _override_ vertical (or horizontal) margins _already specified_ as 'margin' property for more general class. For example:

    .general       {margin:   1em 20px; }
    .general.lorem {margin-y: 2em; }
    .general.ipsum {margin-y: 3em; }

Currently we are forced to duplicate either vertical margin (value for more specific class):

    .general.lorem {margin-top: 2em; margin-bottom: 2em; }
    .general.ipsum {margin-top: 3em; margin-bottom: 3em; }

or horizontal one (repeating value already specified for more general class):

    .general.lorem {margin: 2em 20px; }
    .general.ipsum {margin: 3em 20px; }

This is non-DRY and makes CSS-code littered / less readable and eventually making maintenance harder.

Introducing margin-y and margin-x properties would make things simpler and smarter.

(Same applies to at least padding and border-* properties like border-width as well as any other properties where vertical/horizontal values make sense.)

Thanks.

Received on Sunday, 15 January 2012 22:21:43 UTC