A Mnemonic for The Order of CSS Margin and Padding Shorthand Properties

A mnemonic for the order of CSS margin and padding shorthand properties

If you don't get it right, there will be TRouBLe

keywords (initial, revert, etc) in padding and margin shorthand properties

Use padding-inline to target only left and right side

padding-inline: 1em;

div {
  padding-inline: 1em;
  border:1px solid red;
}

<div>box</div>

Leaving certain values unchanged when using CSS shorthand properties

This isn't currently possible, unfortunately. You'll have to stick with assigning margin-top and margin-bottom respectively.

A shorthand property always changes the values of all its component (longhand) properties. Namely, any values omitted in a shorthand property will default to initial for their respective properties, unless resolved by cascading or by some other rules depending on the shorthand property. For example, the following results in auto margins on all sides except the bottom due to the margin-bottom longhand that appears after the shorthand:

#header {
    /* 
     * Note: this is short for margin: auto auto auto auto;
     * none of the longhands are set to initial! Different shorthands
     * have different rules, but a shorthand always changes the values
     * of all its longhands.
     */
    margin: auto;
    margin-bottom: 1em;
}

If there were separate shorthands for horizontal margins and vertical margins, you would be able to do this without having to worry about keeping specific longhand values, but no such shorthands exist at the moment.

As I mentioned in my comment, margin: 1em inherit is invalid as the CSS-wide keywords inherit (along with initial and others introduced in later standards) may only appear by themselves in property declarations, and this includes shorthand declarations. Even if margin: 1em inherit did work, the element would inherit horizontal margins from its parent element, and not from its own cascade (since that's not what inheritance means). It is not possible to retrieve a cascaded or specified value for a property on a given element, and being able to do this would almost certainly be error-prone due to the fact that the bottommost declaration from the most specific selector that contains the resolved value could be anywhere.

How can I memorize all CSS shorthands?

Here’s a decent CSS shorthand cheat sheet (PDF).

CSS margin notation (top, right, bottom, left)

The two style declarations you have shown are different:

The first one, margin-bottom: 5px;, only specifies the bottom margin, so for all other margins (top, left, right) values defined elsewhere (if not in your stylesheets, then maybe in the browser’s default stylesheet) are still applied – whereas the second one, margin: 0px 0px 5px 0px; sets all values explicitly.

CSS: Explicitly declaring position, padding, margin, and overflow for every item?

Another resource, that I think is better for resetting CSS is YUI Reset (from Yahoo!). It has a great reset CSS file with additional files you can add on the end to make everything look consistent cross-browser (including fonts which can get very annoying very fast in CSS)

Here are the links

http://developer.yahoo.com/yui/reset/

http://developer.yahoo.com/yui/base/

http://developer.yahoo.com/yui/fonts/

I use the Reset, Base and Font stylesheets (in that order) in ALL my web projects.

Using a reset stylesheet that consists of "* { margin: 0; padding: 0; }" will create even worse cross-browser issues. You need to reset everything and THEN declare a base that all the browsers can start from (the purpose of reset.css and base.css).s

What is the third value in CSS padding?

The padding and margin properties specify top right bottom left.

If left is omitted, it will default to right.

Thus, padding: a b c is equivalent to padding: a b c b.

If bottom is also omitted, it will default to top.

Thus, padding: a b is equivalent to padding: a b a b.

If right is also omitted, the single value is used for all 4 sides.

Thus, padding: a is equivalent to padding: a a a a.

Stylelint Nesting Declaration Order Arrays

In stylelint is it possible to nest arrays for the rule declaration-block-properties-order?

No, it is not possible. You have two options:

1. Write a plugin that offers this flexibility.
2. Require that margin must come before padding, or vice versa, in your CSS code.

I'd recommend the latter option as the more specific your order of properties, the easier it is for team members to know where to look to see if a property is being used within a declaration block.

---

Related Topics