p-recursive

...

The padding is the most repeated CSS property. Wouldn't it be nice if we can stop writing it again and again ?

If you have an element with child elements that each have the same padding, normally you will have to add the same padding on EACH element.

It's very boring and not handy because if you want to change the padding you will have to change it on EACH element.

To solve that you can use the `p-recursive` attribute which will add the same padding to all child elements. It's very useful because you don't have to repeat yourself and you can change the padding of all children at one place.

Like for the p utility you can use it for different direction :

p-recursive: define a recursive padding in every direction
px-recursive: define an horizontal recursive padding
py-recursive: define vertical recursive padding
pt-recursive: define recursive padding-top
pb-recursive: define recursive padding-bottom
pl-recursive: define recursive padding-left
pr-recursive: define recursive padding-right

Examples

A classic approach would be something like this

A smartest way to do the same thing with recursive padding is this :