CSS Padding Order Explained and Demonstrated

CSS padding order refers to the order of the values in the padding shorthand property. The order needs to be correct otherwise you will be applying padding to the wrong sides.

If there is one value in the padding shorthand then that value is applied to all sides.

If there are two values then the first value is applied top and bottom and the second value is applied left and right.

If there are three values then the first value is applied to the top, the second value is applied left and right and the third value is applied to the bottom.

If there are four values then the first value is applied to the top, the second value is applied to the right, the third value is applied to the bottom and the fourth value is applied to the left.

A great way to remember the order of padding (and of margins coincidently) is the word TROUBLE. If you remove all of the vowels you are left with TRBL.

TRBL is an acronym for Top, Right, Bottom, and Left. Which is the order of application when all 4 values are in the padding parameter.

You can now apply padding to all the elements that require it.

That's all there is to it. I hope this video helps you! If you have any questions, please leave them in the comments below. And before you go, subscribe and like :)

If you're into Wordpress, check out my WPLearningLab channel to learn more about WordPress so you can earn more for yourself, for your clients or for your business.