Written by Michael Lee on April 18, 2014

When I ran my live webinar to teach HTML and CSS, there was a point in the lesson where I was trying to explain box modeling. Particularly I was trying to explain properties such as margin and padding. How you can group multiple values into a single property.

So a style block like this:

element {
  padding-top: 10px;
  padding-right: 5px;
  padding-bottom: 3px;
  padding-left: 5px;

Could be written as this:

  padding: 10px 5px 3px 5px;

The order in which you write the values in the single property goes clockwise from top, to right, to bottom then to left.

Jess Martin, who was in the audience mentioned he used the acronym, TRBL to remember the order. I thought it was great because it was so easy to remember.

The acronym stuck with me so well, I decided to create a simple code illustration that visually maps a box element with its corresponding value in a property.

See the Pen TRBL by Michael Lee (@michaellee) on CodePen.

Thanks for taking the time to read this article. I'd love to stay in touch and share more tips on programming and design, side projects and working remotely. Sign up and I'll send you my articles straight to your email.

:wave: Hey hey, I'm Michael Lee! I really appreciate you taking the time to read this article.

Be sure to check out my other articles.