Skip to main content

Class-padding

Utilities for setting the padding of an element.

Use the v-p/pt/pl/pr/pb-* utilities to control the h of an element. You can use
the feat: custom feature if you want the h padding to suit your needs.

Table list paddings​

Name classProperties
v-p-autopadding: auto;
v-p-0pxpadding: 0px;
v-p-5pxpadding: 5px;
v-p-10pxpadding: 10px;
v-p-15pxpadding: 15px;
v-p-20pxpadding: 20px;
v-p-25pxpadding: 25px;
v-p-30pxpadding: 30px;
v-p-35pxpadding: 35px;
v-p-40pxpadding: 40px;
v-p-45pxpadding: 45px;
v-p-50pxpadding: 50px;
v-p-55pxpadding: 55px;
v-p-60pxpadding: 60px;
v-p-65pxpadding: 65px;
v-p-70pxpadding: 70px;
v-p-75pxpadding: 75px;
v-p-80pxpadding: 80px;
v-p-85pxpadding: 85px;
v-p-90pxpadding: 90px;
v-p-95pxpadding: 95px;
v-p-100pxpadding: 100px;
v-p-200pxpadding: 200px;
v-p-300pxpadding: 300px;
v-p-400pxpadding: 400px;
v-p-500pxpadding: 500px;
v-p-600pxpadding: 600px;
v-p-700pxpadding: 700px;
v-p-800pxpadding: 800px;
v-pt-autopadding-top: auto;
v-pt-0pxpadding-top: 0px;
v-pt-5pxpadding-top: 5px;
v-pt-10pxpadding-top: 10px;
v-pt-15pxpadding-top: 15px;
v-pt-20pxpadding-top: 20px;
v-pt-25pxpadding-top: 25px;
v-pt-30pxpadding-top: 30px;
v-pt-35pxpadding-top: 35px;
v-pt-40pxpadding-top: 40px;
v-pt-45pxpadding-top: 45px;
v-pt-50pxpadding-top: 50px;
v-pt-55pxpadding-top: 55px;
v-pt-60pxpadding-top: 60px;
v-pt-65pxpadding-top: 65px;
v-pt-70pxpadding-top: 70px;
v-pt-75pxpadding-top: 75px;
v-pt-80pxpadding-top: 80px;
v-pt-85pxpadding-top: 85px;
v-pt-90pxpadding-top: 90px;
v-pt-95pxpadding-top: 95px;
v-pt-100pxpadding-top: 100px;
v-pt-200pxpadding-top: 200px;
v-pt-300pxpadding-top: 300px;
v-pt-400pxpadding-top: 400px;
v-pt-500pxpadding-top: 500px;
v-pt-600pxpadding-top: 600px;
v-pt-700pxpadding-top: 700px;
v-pt-800pxpadding-top: 800px;
v-pl-autopadding-left: auto;
v-pl-0pxpadding-left: 0px;
v-pl-5pxpadding-left: 5px;
v-pl-10pxpadding-left: 10px;
v-pl-15pxpadding-left: 15px;
v-pl-20pxpadding-left: 20px;
v-pl-25pxpadding-left: 25px;
v-pl-30pxpadding-left: 30px;
v-pl-35pxpadding-left: 35px;
v-pl-40pxpadding-left: 40px;
v-pl-45pxpadding-left: 45px;
v-pl-50pxpadding-left: 50px;
v-pl-55pxpadding-left: 55px;
v-pl-60pxpadding-left: 60px;
v-pl-65pxpadding-left: 65px;
v-pl-70pxpadding-left: 70px;
v-pl-75pxpadding-left: 75px;
v-pl-80pxpadding-left: 80px;
v-pl-85pxpadding-left: 85px;
v-pl-90pxpadding-left: 90px;
v-pl-95pxpadding-left: 95px;
v-pl-100pxpadding-left: 100px;
v-pl-200pxpadding-left: 200px;
v-pl-300pxpadding-left: 300px;
v-pl-400pxpadding-left: 400px;
v-pl-500pxpadding-left: 500px;
v-pl-600pxpadding-left: 600px;
v-pl-700pxpadding-left: 700px;
v-pl-800pxpadding-left: 800px;
v-pr-autopadding-right: auto;
v-pr-0pxpadding-right: 0px;
v-pr-5pxpadding-right: 5px;
v-pr-10pxpadding-right: 10px;
v-pr-15pxpadding-right: 15px;
v-pr-20pxpadding-right: 20px;
v-pr-25pxpadding-right: 25px;
v-pr-30pxpadding-right: 30px;
v-pr-35pxpadding-right: 35px;
v-pr-40pxpadding-right: 40px;
v-pr-45pxpadding-right: 45px;
v-pr-50pxpadding-right: 50px;
v-pr-55pxpadding-right: 55px;
v-pr-60pxpadding-right: 60px;
v-pr-65pxpadding-right: 65px;
v-pr-70pxpadding-right: 70px;
v-pr-75pxpadding-right: 75px;
v-pr-80pxpadding-right: 80px;
v-pr-85pxpadding-right: 85px;
v-pr-90pxpadding-right: 90px;
v-pr-95pxpadding-right: 95px;
v-pr-100pxpadding-right: 100px;
v-pr-200pxpadding-right: 200px;
v-pr-300pxpadding-right: 300px;
v-pr-400pxpadding-right: 400px;
v-pr-500pxpadding-right: 500px;
v-pr-600pxpadding-right: 600px;
v-pr-700pxpadding-right: 700px;
v-pr-800pxpadding-right: 800px;
v-pb-autopadding-bottom: auto;
v-pb-0pxpadding-bottom: 0px;
v-pb-5pxpadding-bottom: 5px;
v-pb-10pxpadding-bottom: 10px;
v-pb-15pxpadding-bottom: 15px;
v-pb-20pxpadding-bottom: 20px;
v-pb-25pxpadding-bottom: 25px;
v-pb-30pxpadding-bottom: 30px;
v-pb-35pxpadding-bottom: 35px;
v-pb-40pxpadding-bottom: 40px;
v-pb-45pxpadding-bottom: 45px;
v-pb-50pxpadding-bottom: 50px;
v-pb-55pxpadding-bottom: 55px;
v-pb-60pxpadding-bottom: 60px;
v-pb-65pxpadding-bottom: 65px;
v-pb-70pxpadding-bottom: 70px;
v-pb-75pxpadding-bottom: 75px;
v-pb-80pxpadding-bottom: 80px;
v-pb-85pxpadding-bottom: 85px;
v-pb-90pxpadding-bottom: 90px;
v-pb-95pxpadding-bottom: 95px;
v-pb-100pxpadding-bottom: 100px;
v-pb-200pxpadding-bottom: 200px;
v-pb-300pxpadding-bottom: 300px;
v-pb-400pxpadding-bottom: 400px;
v-pb-500pxpadding-bottom: 500px;
v-pb-600pxpadding-bottom: 600px;
v-pb-700pxpadding-bottom: 700px;
v-pb-800pxpadding-bottom: 800px;

The table above presents several types of paddings with different variants.

Example Code​

h.html
<div class="v-pt-3 v-pl-4">
</div>