W3C home > Mailing lists > Public > public-css-archive@w3.org > August 2021

[csswg-drafts] [css-box-4] Padding/Margin horizontal and vertical shorthands (#6507)

From: Finn Pauls via GitHub <sysbot+gh@w3.org>
Date: Tue, 10 Aug 2021 16:40:56 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-965120200-1628613294-sysbot+gh@w3.org>
finnp has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-box-4] Padding/Margin horizontal and vertical shorthands ==
## Motivation

The `padding` and `margin` shorthands for combining top/bottom and left/right are quite practical. They transform 

padding-top: 10px;
paddding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;


padding: 5px 10px;

However they have 2 issues. The more important one is that it's easy to forget which one of these are the top/bottom and which are the left/right values. In graphics width by height is usually given in that order: width, height. So someone might incorrectly assume that left/right comes first.

The other shortcoming is that it requires you to specify both vertical and horizontal padding/margin even if you might only want to specify one.

## Suggestion
Introduce a `padding-horizontal`, `padding-vertical`, `margin-horizontal` and `margin-vertical` shorthand.

This would allow to write something like
margin-left: 10px;
margin-right: 10px;

margin-horizontal: 10px;

I would be happy to get feedback on this, it's my first time I'm suggesting something to the CSS working group. ✨

## Links

- Margins https://www.w3.org/TR/css-box-4/#margins
- Paddings https://www.w3.org/TR/css-box-4/#paddings

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6507 using your GitHub account

Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 10 August 2021 16:40:57 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:42 UTC