Spacing

Classes related to the space around an element's content.

• /* PADDING */
  .pa-0{padding: 0}.pa-1{padding: 5px}.pa-2{padding: 10px}.pa-3{padding: 15px}
  .pa-4{padding: 20px}.pa-5{padding: 25px}.pa-6{padding: 30px}.pa-7{padding: 35px}
  .pa-8{padding: 40px}.pa-100{padding: 100px}.pa-150{padding: 150px}.pa-200{padding: 200px}
  /* HORIZONTAL */
  .px-0{padding-left: 0; padding-right: 0}.px-1{padding-left: 5px; padding-right: 5px}
  .px-2{padding-left: 10px; padding-right: 10px}.px-3{padding-left: 15px; padding-right: 15px}
  .px-4{padding-left: 20px; padding-right: 20px}.px-5{padding-left: 25px; padding-right: 25px}
  .px-6{padding-left: 30px; padding-right: 30px}.px-7{padding-left: 35px; padding-right: 35px}
  .px-8{padding-left: 40px; padding-right: 40px}.px-100{padding-left: 100px; padding-right: 100px}
  .px-150{padding-left: 150px; padding-right: 150px}.px-200{padding-left: 200px; padding-right: 200px}
  .pl-0{padding-left: 0}.pl-1{padding-left: 5px}.pl-2{padding-left: 10px}.pl-3{padding-left: 15px}
  .pl-4{padding-left: 20px}.pl-5{padding-left: 25px}.pl-6{padding-left: 30px}.pl-7{padding-left: 35px}
  .pl-8{padding-left: 40px}.pl-100{padding-left: 100px}.pl-150{padding-left: 150px}.pl-200{padding-left: 200px}
  .pr-0{padding-right: 0}.pr-1{padding-right: 5px}.pr-2{padding-right: 10px}.pr-3{padding-right: 15px}
  .pr-4{padding-right: 20px}.pr-5{padding-right: 25px}.pr-6{padding-right: 30px}.pr-7{padding-right: 35px}
  .pr-8{padding-right: 40px}.pr-100{padding-right: 100px}.pr-200{padding-right: 150px}.pr-150{padding-right: 200px}
  /* VERTICAL */
  .py-0{padding-top: 0; padding-bottom: 0}.py-1{padding-top: 5px; padding-bottom: 5px}
  .py-2{padding-top: 10px; padding-bottom: 10px}.py-3{padding-top: 15px; padding-bottom: 15px}
  .py-4{padding-top: 20px; padding-bottom: 20px}.py-5{padding-top: 25px; padding-bottom: 25px}
  .py-6{padding-top: 30px; padding-bottom: 30px}.py-7{padding-top: 35px; padding-bottom: 35px}
  .py-8{padding-top: 40px; padding-bottom: 40px}.py-100{padding-top: 100px; padding-bottom: 100px}
  .py-200{padding-top: 200px; padding-bottom: 200px}.py-150{padding-top: 150px; padding-bottom: 150px}
  .pt-0{padding-top: 0}.pt-1{padding-top: 5px}.pt-2{padding-top: 10px}.pt-3{padding-top: 15px}
  .pt-4{padding-top: 20px}.pt-5{padding-top: 25px}.pt-6{padding-top: 30px}.pt-7{padding-top: 35px}
  .pt-8{padding-top: 40px}.pt-100{padding-top: 100px}.pt-200{padding-top: 200px}.pt-150{padding-top: 150px}
  .pb-0{padding-bottom: 0}.pb-1{padding-bottom: 5px}.pb-2{padding-bottom: 10px}.pb-3{padding-bottom: 15px}
  .pb-4{padding-bottom: 20px}.pb-5{padding-bottom: 25px}.pb-6{padding-bottom: 30px}.pb-7{padding-bottom: 35px}
  .pb-8{padding-bottom: 40px}.pb-100{padding-bottom: 100px}.pb-200{padding-bottom: 200px}.pb-150{padding-bottom: 150px}
  /* MARGIN */
  .ma-0{margin: 0}.ma-1{margin: 5px}.ma-2{margin: 10px}.ma-3{margin: 15px}
  .ma-4{margin: 20px}.ma-5{margin: 25px}.ma-6{margin: 30px}.ma-7{margin: 35px}
  .ma-8{margin: 40px}.ma-100{margin: 100px}.ma-150{margin: 150px}.ma-200{margin: 200px}
  .ma-0{margin: 0}.ma-1{margin: 5px}.ma-2{margin: 10px}.ma-3{margin: 15px}
  .ma-4{margin: 20px}.ma-5{margin: 25px}.ma-6{margin: 30px}.ma-7{margin: 35px}
  .ma-8{margin: 40px}.ma-100{margin: 100px}.ma-150{margin: 150px}.ma-200{margin: 200px}
  /* HORIZONTAL */
  .mx-0{margin-left: 0; margin-right: 0}.mx-1{margin-left: 5px; margin-right: 5px}
  .mx-2{margin-left: 10px; margin-right: 10px}.mx-3{margin-left: 15px; margin-right: 15px}
  .mx-4{margin-left: 20px; margin-right: 20px}.mx-5{margin-left: 25px; margin-right: 25px}
  .mx-6{margin-left: 30px; margin-right: 30px}.mx-7{margin-left: 35px; margin-right: 35px}
  .mx-8{margin-left: 40px; margin-right: 40px}.mx-100{margin-left: 100px; margin-right: 100px}
  .mx-150{margin-left: 150px; margin-right: 150px}.mx-200{margin-left: 200px; margin-right: 200px}
  .ml-0{margin-left: 0}.ml-1{margin-left: 5px}.ml-2{margin-left: 10px}.ml-3{margin-left: 15px}
  .ml-4{margin-left: 20px}.ml-5{margin-left: 25px}.ml-6{margin-left: 30px}.ml-7{margin-left: 35px}
  .ml-8{margin-left: 40px}.ml-100{margin-left: 100px}.ml-150{margin-left: 150px}.ml-200{margin-left: 200px}
  .mr-0{margin-right: 0}.mr-1{margin-right: 5px}.mr-2{margin-right: 10px}.mr-3{margin-right: 15px}
  .mr-4{margin-right: 20px}.mr-5{margin-right: 25px}.mr-6{margin-right: 30px}.mr-7{margin-right: 35px}
  .mr-8{margin-right: 40px}.mr-100{margin-right: 100px}.mr-200{margin-right: 150px}.mr-150{margin-right: 200px}
  /* VERTICAL */
  .my-0{margin-top: 0; margin-bottom: 0}.my-1{margin-top: 5px; margin-bottom: 5px}
  .my-2{margin-top: 10px; margin-bottom: 10px}.my-3{margin-top: 15px; margin-bottom: 15px}
  .my-4{margin-top: 20px; margin-bottom: 20px}.my-5{margin-top: 25px; margin-bottom: 25px}
  .my-6{margin-top: 30px; margin-bottom: 30px}.my-7{margin-top: 35px; margin-bottom: 35px}
  .my-8{margin-top: 40px; margin-bottom: 40px}.my-100{margin-top: 100px; margin-bottom: 100px}
  .my-200{margin-top: 200px; margin-bottom: 200px}.my-150{margin-top: 150px; margin-bottom: 150px}
  .mt-0{margin-top: 0}.mt-1{margin-top: 5px}.mt-2{margin-top: 10px}.mt-3{margin-top: 15px}
  .mt-4{margin-top: 20px}.mt-5{margin-top: 25px}.mt-6{margin-top: 30px}.mt-7{margin-top: 35px}
  .mt-8{margin-top: 40px}.mt-100{margin-top: 100px}.mt-200{margin-top: 200px}.mt-150{margin-top: 150px}
  .mb-0{margin-bottom: 0}.mb-1{margin-bottom: 5px}.mb-2{margin-bottom: 10px}.mb-3{margin-bottom: 15px}
  .mb-4{margin-bottom: 20px}.mb-5{margin-bottom: 25px}.mb-6{margin-bottom: 30px}.mb-7{margin-bottom: 35px}
  .mb-8{margin-bottom: 40px}.mb-100{margin-bottom: 100px}.mb-200{margin-bottom: 200px}.mb-150{margin-bottom: 150px}