Class-TLRB
adjust the best position for each component
Use the v-t/r/l/b-* utilities to control the topLeftRightBottom of an element.
You can use
the feat: custom feature if you want the topLeftRightBottom to suit your needs.
Table list topLeftRightBottoms
| Class name | Properties |
|---|---|
v-t-auto | top: auto; |
v-t-0px | top: 0px; |
v-t-5px | top: 5px; |
v-t-10px | top: 10px; |
v-t-15px | top: 15px; |
v-t-20px | top: 20px; |
v-t-25px | top: 25px; |
v-t-30px | top: 30px; |
v-t-35px | top: 35px; |
v-t-40px | top: 40px; |
v-t-45px | top: 45px; |
v-t-50px | top: 50px; |
v-t-55px | top: 55px; |
v-t-60px | top: 60px; |
v-t-65px | top: 65px; |
v-t-70px | top: 70px; |
v-t-75px | top: 75px; |
v-t-80px | top: 80px; |
v-t-85px | top: 85px; |
v-t-90px | top: 90px; |
v-t-95px | top: 95px; |
v-t-100px | top: 100px; |
v-t-200px | top: 200px; |
v-t-300px | top: 300px; |
v-t-400px | top: 400px; |
v-t-500px | top: 500px; |
v-t-600px | top: 600px; |
v-t-700px | top: 700px; |
v-t-800px | top: 800px; |
v-l-auto | left: auto; |
v-l-0px | left: 0px; |
v-l-5px | left: 5px; |
v-l-10px | left: 10px; |
v-l-15px | left: 15px; |
v-l-20px | left: 20px; |
v-l-25px | left: 25px; |
v-l-30px | left: 30px; |
v-l-35px | left: 35px; |
v-l-40px | left: 40px; |
v-l-45px | left: 45px; |
v-l-50px | left: 50px; |
v-l-55px | left: 55px; |
v-l-60px | left: 60px; |
v-l-65px | left: 65px; |
v-l-70px | left: 70px; |
v-l-75px | left: 75px; |
v-l-80px | left: 80px; |
v-l-85px | left: 85px; |
v-l-90px | left: 90px; |
v-l-95px | left: 95px; |
v-l-100px | left: 100px; |
v-l-200px | left: 200px; |
v-l-300px | left: 300px; |
v-l-400px | left: 400px; |
v-l-500px | left: 500px; |
v-l-600px | left: 600px; |
v-l-700px | left: 700px; |
v-l-800px | left: 800px; |
v-r-auto | right: auto; |
v-r-0px | right: 0px; |
v-r-5px | right: 5px; |
v-r-10px | right: 10px; |
v-r-15px | right: 15px; |
v-r-20px | right: 20px; |
v-r-25px | right: 25px; |
v-r-30px | right: 30px; |
v-r-35px | right: 35px; |
v-r-40px | right: 40px; |
v-r-45px | right: 45px; |
v-r-50px | right: 50px; |
v-r-55px | right: 55px; |
v-r-60px | right: 60px; |
v-r-65px | right: 65px; |
v-r-70px | right: 70px; |
v-r-75px | right: 75px; |
v-r-80px | right: 80px; |
v-r-85px | right: 85px; |
v-r-90px | right: 90px; |
v-r-95px | right: 95px; |
v-r-100px | right: 100px; |
v-r-200px | right: 200px; |
v-r-300px | right: 300px; |
v-r-400px | right: 400px; |
v-r-500px | right: 500px; |
v-r-600px | right: 600px; |
v-r-700px | right: 700px; |
v-r-800px | right: 800px; |
v-b-auto | bottom: auto; |
v-b-0px | bottom: 0px; |
v-b-5px | bottom: 5px; |
v-b-10px | bottom: 10px; |
v-b-15px | bottom: 15px; |
v-b-20px | bottom: 20px; |
v-b-25px | bottom: 25px; |
v-b-30px | bottom: 30px; |
v-b-35px | bottom: 35px; |
v-b-40px | bottom: 40px; |
v-b-45px | bottom: 45px; |
v-b-50px | bottom: 50px; |
v-b-55px | bottom: 55px; |
v-b-60px | bottom: 60px; |
v-b-65px | bottom: 65px; |
v-b-70px | bottom: 70px; |
v-b-75px | bottom: 75px; |
v-b-80px | bottom: 80px; |
v-b-85px | bottom: 85px; |
v-b-90px | bottom: 90px; |
v-b-95px | bottom: 95px; |
v-b-100px | bottom: 100px; |
v-b-200px | bottom: 200px; |
v-b-300px | bottom: 300px; |
v-b-400px | bottom: 400px; |
v-b-500px | bottom: 500px; |
v-b-600px | bottom: 600px; |
v-b-700px | bottom: 700px; |
v-b-800px | bottom: 800px; |
The table above presents several types of topLeftRightBottom with different variants.
Example Code
index.html
<div class="v-absolute v-t-3 v-l-4">
</div>