Practical advice for building websites with web standards
The typical way of setting margins and paddings involve specifiying a value for each of the top, right, bottom and left in sequence. Depending on the situation, we can use shorthand values for both optimisation and clarity, but sometimes it isn’t always clear.
Note: Using file size optimisation as a basis for a styleguide for writing CSS is the wrong way to go. Always favour readability and legibility of the code over the number of bytes across the wire. Use a CSS compressor right before the CSS file gets deployed to a production environment; that’s the right place to optimise file size.
Specifying all four values one after the other is the most common shorthand of all for margins and paddings:
margin: 20px 10px 15px 5px;
This style rule applied a top-margin of 20 pixels, a right margin of 10 pixels, a bottom margin of 15 pixels and a left margin of 5 pixels. The rule that each side is defined in a clock-wise order starting from the top; hence the sequence of: top, right, bottom, left
This is the worst case scenario. It suggest there is neither horizontal consistency nor vertical consistency of margins. Designs done without horizontal consistency are harder to visualise and debug than those that are consistent. Specifying all four values doesn’t imply any consistency.
Specifying one value is the second most common approach to setting margins and paddings:
This style rule sets all four sides (top, right, bottom, left) to 5 pixels. This leads us to our first implicit rule of shorthand usage: even when a particular side is not explicitly specified, it is always set to something in a short hand rule.
This shorthand is equivalent to
margin: 5px 5px 5px 5px. This is the height of consistency; all margins are the same. The cognitive load for a site maintainer is the lowest when one value is specified. There is the implication that the design is both horizontally and vertically consistent; everything is perfectly balanced, and nothing is asymmetric.
Specifying one value makes it abundantly clear that all four values are being set, and the resulting code is less cluttered than specifying all four values. So this one is a maintenance benefit.
The next common margin and padding shorthand is specifying two values:
margin: 10px 5px;
What this particular rule does is to set both the top and bottom margins to 10 pixels, and both the right and left margins to 5 pixels. Essentially, this is the same as
margin: 10px 5px 10px 5px;. The values in the property are just duplicated, in the same order.
The two shorthand values implicitly suggest both vertical consistency and horizontal consistency. The resulting code is clear and less cluttered than specifying all four values, so again this is a maintenance plus. Flagging horizontal consistency and vertical consistency by using two values is another maintenance benefit – saying more with less code.
Specifying three values is the least used of the shorthand methods. But surprisingly appreciated by many world-class web developers.
margin: 10px 5px 15px;
This style sets the top to 10 pixels, the right to 5 pixels, and the bottom to 15 pixels. That’s the easy part. What’s the left margin after this style rule?
The answer is that the left value takes on the same value as the right. So the equivalent 4 value rule is:
margin: 10px 5px 15px 5px;. I found this particular shorthand method difficult to remember, because I didn’t understand the point behind this option. And so I never used it, preferring either to express all four values, or two, or one.
And the point behind three shorthand values is this:
Three value margin shorthands imply that there is horizontal consistency in the design. It means that the developer has coded the design in such a way that the left and right margins of each container are equal. Grid-based layouts are prime examples of where left and right margin consistency is essential, and the three value shorthand is a good indication that this approach has been used.
That’s the key to remember when you see three values in a margin and padding shorthand: The developer had build the page with consistent right and left margins. If you see four values in this type of layout, that means the consistency has been broken for a reason.
Due to the nature of a web page, horizontal consistency is more feasible and practical than vertical consistency. So the likelihood of left and right margins being equal is greater than the top and bottom margins being equal. It is in these situations where left and right are the same, but top and bottom are not that the three value margin shortcut is used.
It is a matter of taste whether you use the three shorthand values or not. I’ve tended to stay away from it, but I got caught out when it was used on a page created by someone else. But it’s worth knowing how it works and what extra meaning it implies.