Simple Mnemonic for Margin or Padding Shorthand Property Values
Greetings, friends! If you’re already an expert in CSS, this article might seem boring to you. This is intended for beginners and curious readers. However, even if you’re an expert, but still sometimes forget the shorthand notation used for paddings and margins, then keep reading!
The padding and margin properties can be added to four sides: top, right, bottom, and left. The shorthand property of padding and margin let us specify all directions without explicitly defining the properties, padding-top, padding-right, padding-bottom, and padding-left. In other words, these two are equivalent:
/* Shorthand notation with one value */
padding: 2rem;/* The above statement is equivalent to the following */
padding-top: 2rem;
padding-right: 2rem;
padding-bottom: 2rem;
padding-left: 2rem;
However, sometimes we forget what shorthand notation corresponds to which direction. The other day I was trying to find an easy way for new beginners in the CSS world to remember how to use the shorthand notation for padding and margins. Then, I recognized that the different notations were similar to common shapes.
The letter, “L”, is typically drawn by drawing the vertical line first and the horizontal line second. Similarly, the padding shorthand notation with two values specifies the top/bottom paddings first and then the left/right paddings second.
/* Shorthand notation with two values */
padding: 1rem 2rem;/* The above statement is equivalent to the following */
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 2rem;
padding-right: 2rem;
The division symbol is typically drawn by drawing the top dot first. Then, the horizontal line is drawn second. Finally, the bottom dot is drawn. Similarly, the padding shorthand notation with three values specifies the top padding first, the left/right padding second, and then the bottom padding third.
/* Shorthand notation with three values */
padding: 1rem 2rem 2rem;/* The above statement is equivalent to the following */
padding-top: 1rem;
padding-left: 2rem;
padding-right: 2rem;
padding-bottom: 2rem;
You can remember the shorthand notation with four values by thinking of a clock. It starts at the top of the clock and then moves to the right, then bottom, and then left. Similarly, the padding shorthand notation with four values specifies padding-top first, padding-right second, padding-bottom third, and padding-left last.
/* Shorthand notation with four values */
padding: 1rem 2rem 2rem 2rem;/* The above statement is equivalent to the following */
padding-top: 1rem;
padding-right: 2rem;
padding-bottom: 2rem;
padding-left: 2rem;
And that’s it! The same trick applies to margins as well! I hope this mnemonic trick helps you remember what each shorthand notation means the next time you’re reading and writing code! Let me know if this helps or if you have your own mnemonic you use! :)
