Picture of Michael Lee
:wave: Hey hey, I'm Michael Lee and this is my site about being a developer, being a dad and making side projects.


Written 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 and side projects. Sign up and I'll send you my articles straight to your email.