Skip to main content

Class-margin

Utilities for setting the margin of an element.

Use the v-m/mt/ml/mr/mb-* utilities to control the h of an element. You can use
the feat: custom feature if you want the h margin to suit your needs.

Table list margins​

Name classProperties
v-m-automargin: auto;
v-m-0pxmargin: 0px;
v-m-5pxmargin: 5px;
v-m-10pxmargin: 10px;
v-m-15pxmargin: 15px;
v-m-20pxmargin: 20px;
v-m-25pxmargin: 25px;
v-m-30pxmargin: 30px;
v-m-35pxmargin: 35px;
v-m-40pxmargin: 40px;
v-m-45pxmargin: 45px;
v-m-50pxmargin: 50px;
v-m-55pxmargin: 55px;
v-m-60pxmargin: 60px;
v-m-65pxmargin: 65px;
v-m-70pxmargin: 70px;
v-m-75pxmargin: 75px;
v-m-80pxmargin: 80px;
v-m-85pxmargin: 85px;
v-m-90pxmargin: 90px;
v-m-95pxmargin: 95px;
v-m-100pxmargin: 100px;
v-m-200pxmargin: 200px;
v-m-300pxmargin: 300px;
v-m-400pxmargin: 400px;
v-m-500pxmargin: 500px;
v-m-600pxmargin: 600px;
v-m-700pxmargin: 700px;
v-m-800pxmargin: 800px;
v-mt-automargin-top: auto;
v-mt-0pxmargin-top: 0px;
v-mt-5pxmargin-top: 5px;
v-mt-10pxmargin-top: 10px;
v-mt-15pxmargin-top: 15px;
v-mt-20pxmargin-top: 20px;
v-mt-25pxmargin-top: 25px;
v-mt-30pxmargin-top: 30px;
v-mt-35pxmargin-top: 35px;
v-mt-40pxmargin-top: 40px;
v-mt-45pxmargin-top: 45px;
v-mt-50pxmargin-top: 50px;
v-mt-55pxmargin-top: 55px;
v-mt-60pxmargin-top: 60px;
v-mt-65pxmargin-top: 65px;
v-mt-70pxmargin-top: 70px;
v-mt-75pxmargin-top: 75px;
v-mt-80pxmargin-top: 80px;
v-mt-85pxmargin-top: 85px;
v-mt-90pxmargin-top: 90px;
v-mt-95pxmargin-top: 95px;
v-mt-100pxmargin-top: 100px;
v-mt-200pxmargin-top: 200px;
v-mt-300pxmargin-top: 300px;
v-mt-400pxmargin-top: 400px;
v-mt-500pxmargin-top: 500px;
v-mt-600pxmargin-top: 600px;
v-mt-700pxmargin-top: 700px;
v-mt-800pxmargin-top: 800px;
v-ml-automargin-left: auto;
v-ml-0pxmargin-left: 0px;
v-ml-5pxmargin-left: 5px;
v-ml-10pxmargin-left: 10px;
v-ml-15pxmargin-left: 15px;
v-ml-20pxmargin-left: 20px;
v-ml-25pxmargin-left: 25px;
v-ml-30pxmargin-left: 30px;
v-ml-35pxmargin-left: 35px;
v-ml-40pxmargin-left: 40px;
v-ml-45pxmargin-left: 45px;
v-ml-50pxmargin-left: 50px;
v-ml-55pxmargin-left: 55px;
v-ml-60pxmargin-left: 60px;
v-ml-65pxmargin-left: 65px;
v-ml-70pxmargin-left: 70px;
v-ml-75pxmargin-left: 75px;
v-ml-80pxmargin-left: 80px;
v-ml-85pxmargin-left: 85px;
v-ml-90pxmargin-left: 90px;
v-ml-95pxmargin-left: 95px;
v-ml-100pxmargin-left: 100px;
v-ml-200pxmargin-left: 200px;
v-ml-300pxmargin-left: 300px;
v-ml-400pxmargin-left: 400px;
v-ml-500pxmargin-left: 500px;
v-ml-600pxmargin-left: 600px;
v-ml-700pxmargin-left: 700px;
v-ml-800pxmargin-left: 800px;
v-mr-automargin-right: auto;
v-mr-0pxmargin-right: 0px;
v-mr-5pxmargin-right: 5px;
v-mr-10pxmargin-right: 10px;
v-mr-15pxmargin-right: 15px;
v-mr-20pxmargin-right: 20px;
v-mr-25pxmargin-right: 25px;
v-mr-30pxmargin-right: 30px;
v-mr-35pxmargin-right: 35px;
v-mr-40pxmargin-right: 40px;
v-mr-45pxmargin-right: 45px;
v-mr-50pxmargin-right: 50px;
v-mr-55pxmargin-right: 55px;
v-mr-60pxmargin-right: 60px;
v-mr-65pxmargin-right: 65px;
v-mr-70pxmargin-right: 70px;
v-mr-75pxmargin-right: 75px;
v-mr-80pxmargin-right: 80px;
v-mr-85pxmargin-right: 85px;
v-mr-90pxmargin-right: 90px;
v-mr-95pxmargin-right: 95px;
v-mr-100pxmargin-right: 100px;
v-mr-200pxmargin-right: 200px;
v-mr-300pxmargin-right: 300px;
v-mr-400pxmargin-right: 400px;
v-mr-500pxmargin-right: 500px;
v-mr-600pxmargin-right: 600px;
v-mr-700pxmargin-right: 700px;
v-mr-800pxmargin-right: 800px;
v-mb-automargin-bottom: auto;
v-mb-0pxmargin-bottom: 0px;
v-mb-5pxmargin-bottom: 5px;
v-mb-10pxmargin-bottom: 10px;
v-mb-15pxmargin-bottom: 15px;
v-mb-20pxmargin-bottom: 20px;
v-mb-25pxmargin-bottom: 25px;
v-mb-30pxmargin-bottom: 30px;
v-mb-35pxmargin-bottom: 35px;
v-mb-40pxmargin-bottom: 40px;
v-mb-45pxmargin-bottom: 45px;
v-mb-50pxmargin-bottom: 50px;
v-mb-55pxmargin-bottom: 55px;
v-mb-60pxmargin-bottom: 60px;
v-mb-65pxmargin-bottom: 65px;
v-mb-70pxmargin-bottom: 70px;
v-mb-75pxmargin-bottom: 75px;
v-mb-80pxmargin-bottom: 80px;
v-mb-85pxmargin-bottom: 85px;
v-mb-90pxmargin-bottom: 90px;
v-mb-95pxmargin-bottom: 95px;
v-mb-100pxmargin-bottom: 100px;
v-mb-200pxmargin-bottom: 200px;
v-mb-300pxmargin-bottom: 300px;
v-mb-400pxmargin-bottom: 400px;
v-mb-500pxmargin-bottom: 500px;
v-mb-600pxmargin-bottom: 600px;
v-mb-700pxmargin-bottom: 700px;
v-mb-800pxmargin-bottom: 800px;

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

Example Code​

h.html
<div class="v-mt-3 v-ml-4">
</div>