Padding

Padding by Pixel (p + 0, 5, 10, ... 95, 100)

Padding utilities are based on a global spacing scale which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that could share the same properties, and allows to achieve many different page layouts using the same styles. Use CSS cless like Padding arround 20 pixel p20

Padding all around by Pixel (p + 0, 5, 10, ... 95, 100)

Class Name

p10

Class Name

p20

Padding Left and Right around by Pixel (plr + 0, 5, 10, ... 95, 100)

Class Name

plr5

Class Name

plr10

Class Name

plr20

Padding Top and Bottom by Pixel (ptb + 0, 5, 10, ... 95, 100)

Class Name

ptb5

Class Name

ptb10

Class Name

ptb20

Padding top by Pixel (pt + 0, 5, 10, ... 95, 100)

Class Name

pt5

Class Name

pt10

Class Name

pt20

Padding Right by Pixel (pr + 0, 5, 10, ... 95, 100)

Class Name

pr5

Class Name

pr10

Class Name

pr20

Padding Bottom by Pixel (pb + 0, 5, 10, ... 95, 100)

Class Name

pb5

Class Name

pb10

Class Name

pb20

Padding Left by Pixel (pl + 0, 5, 10, ... 95, 100)

Class Name

pl5

Class Name

pl10

Class Name

pl20

Multi-direction Padding

Class Name

pl30 pt30

Class Name

pt40 pr20

Class Name

pt15 pr5 pb30 pl20

We can use padding percentage (p + 0p, 5p, 10p, ... 95p, 100p)

Also you can percentage padding Left, Right, Top, Bottom, Left and Right, Top and Bottom

Class Name