Padding

The padding CSS shorthand property sets the padding area on all four sides of an element at once.

For responsive

add -sm, -md, -lg or -xl to class name, for example:

<div class="p4-md"></div>

.pxa {
  padding-left: auto;
  padding-right: auto;
}

.pla {
  padding-left: auto;
}

.pra {
  padding-right: auto;
}

.p0 {
  padding: 0;
}

.p1 {
  padding: 0.5rem;
}

.p2 {
  padding: 1rem;
}

.p3 {
  padding: 1.5rem;
}

.p4 {
  padding: 2rem;
}

.p5 {
  padding: 2.5rem;
}

.p6 {
  padding: 3rem;
}

.p7 {
  padding: 3.5rem;
}

.p8 {
  padding: 4rem;
}

.py0 {
  padding-top: 0;
  padding-bottom: 0;
}

.py1 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py2 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py3 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py4 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py5 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py6 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py7 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.py8 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.px0 {
  padding-left: 0;
  padding-right: 0;
}

.px1 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px2 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px3 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px4 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.px5 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.px6 {
  padding-left: 3rem;
  padding-right: 3rem;
}

.px7 {
  padding-left: 3.5rem;
  padding-right: 3.5rem;
}

.px8 {
  padding-left: 4rem;
  padding-right: 4rem;
}

.pt0 {
  padding-top: 0;
}

.pt1 {
  padding-top: 0.5rem;
}

.pt2 {
  padding-top: 1rem;
}

.pt3 {
  padding-top: 1.5rem;
}

.pt4 {
  padding-top: 2rem;
}

.pt5 {
  padding-top: 2.5rem;
}

.pt6 {
  padding-top: 3rem;
}

.pt7 {
  padding-top: 3.5rem;
}

.pt8 {
  padding-top: 4rem;
}

.pr0 {
  padding-right: 0;
}

.pr1 {
  padding-right: 0.5rem;
}

.pr2 {
  padding-right: 1rem;
}

.pr3 {
  padding-right: 1.5rem;
}

.pr4 {
  padding-right: 2rem;
}

.pr5 {
  padding-right: 2.5rem;
}

.pr6 {
  padding-right: 3rem;
}

.pr7 {
  padding-right: 3.5rem;
}

.pr8 {
  padding-right: 4rem;
}

.pb0 {
  padding-bottom: 0;
}

.pb1 {
  padding-bottom: 0.5rem;
}

.pb2 {
  padding-bottom: 1rem;
}

.pb3 {
  padding-bottom: 1.5rem;
}

.pb4 {
  padding-bottom: 2rem;
}

.pb5 {
  padding-bottom: 2.5rem;
}

.pb6 {
  padding-bottom: 3rem;
}

.pb7 {
  padding-bottom: 3.5rem;
}

.pb8 {
  padding-bottom: 4rem;
}

.pl0 {
  padding-left: 0;
}

.pl1 {
  padding-left: 0.5rem;
}

.pl2 {
  padding-left: 1rem;
}

.pl3 {
  padding-left: 1.5rem;
}

.pl4 {
  padding-left: 2rem;
}

.pl5 {
  padding-left: 2.5rem;
}

.pl6 {
  padding-left: 3rem;
}

.pl7 {
  padding-left: 3.5rem;
}

.pl8 {
  padding-left: 4rem;
}