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:
element{
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.