Generador
Margins y Paddings
Lista de tamaños
* Ingresa los tamaños separados por coma.
Vista previa
16
16
Como usar:
<section class="pt-32 pt-md-56">Elemento</section>Tokens
/*paddings*/
.pt-42 {
padding-top:42px !important;
}
.pb-42 {
padding-bottom:42px !important;
}
.py-42 {
padding-block:42px !important;
}
.px-42 {
padding-inline:42px !important;
}
/*margins*/
.mt-42 {
margin-top:42px !important;
}
.mb-42 {
margin-bottom:42px !important;
}
.my-42 {
margin-block:42px !important;
}
.mx-42 {
margin-inline:42px !important;
}
/*paddings*/
.pt-32 {
padding-top:32px !important;
}
.pb-32 {
padding-bottom:32px !important;
}
.py-32 {
padding-block:32px !important;
}
.px-32 {
padding-inline:32px !important;
}
/*margins*/
.mt-32 {
margin-top:32px !important;
}
.mb-32 {
margin-bottom:32px !important;
}
.my-32 {
margin-block:32px !important;
}
.mx-32 {
margin-inline:32px !important;
}
/*paddings*/
.pt-24 {
padding-top:24px !important;
}
.pb-24 {
padding-bottom:24px !important;
}
.py-24 {
padding-block:24px !important;
}
.px-24 {
padding-inline:24px !important;
}
/*margins*/
.mt-24 {
margin-top:24px !important;
}
.mb-24 {
margin-bottom:24px !important;
}
.my-24 {
margin-block:24px !important;
}
.mx-24 {
margin-inline:24px !important;
}
/*paddings*/
.pt-20 {
padding-top:20px !important;
}
.pb-20 {
padding-bottom:20px !important;
}
.py-20 {
padding-block:20px !important;
}
.px-20 {
padding-inline:20px !important;
}
/*margins*/
.mt-20 {
margin-top:20px !important;
}
.mb-20 {
margin-bottom:20px !important;
}
.my-20 {
margin-block:20px !important;
}
.mx-20 {
margin-inline:20px !important;
}
/*paddings*/
.pt-18 {
padding-top:18px !important;
}
.pb-18 {
padding-bottom:18px !important;
}
.py-18 {
padding-block:18px !important;
}
.px-18 {
padding-inline:18px !important;
}
/*margins*/
.mt-18 {
margin-top:18px !important;
}
.mb-18 {
margin-bottom:18px !important;
}
.my-18 {
margin-block:18px !important;
}
.mx-18 {
margin-inline:18px !important;
}
/*paddings*/
.pt-16 {
padding-top:16px !important;
}
.pb-16 {
padding-bottom:16px !important;
}
.py-16 {
padding-block:16px !important;
}
.px-16 {
padding-inline:16px !important;
}
/*margins*/
.mt-16 {
margin-top:16px !important;
}
.mb-16 {
margin-bottom:16px !important;
}
.my-16 {
margin-block:16px !important;
}
.mx-16 {
margin-inline:16px !important;
}
/*paddings*/
.pt-14 {
padding-top:14px !important;
}
.pb-14 {
padding-bottom:14px !important;
}
.py-14 {
padding-block:14px !important;
}
.px-14 {
padding-inline:14px !important;
}
/*margins*/
.mt-14 {
margin-top:14px !important;
}
.mb-14 {
margin-bottom:14px !important;
}
.my-14 {
margin-block:14px !important;
}
.mx-14 {
margin-inline:14px !important;
}
/*paddings*/
.pt-12 {
padding-top:12px !important;
}
.pb-12 {
padding-bottom:12px !important;
}
.py-12 {
padding-block:12px !important;
}
.px-12 {
padding-inline:12px !important;
}
/*margins*/
.mt-12 {
margin-top:12px !important;
}
.mb-12 {
margin-bottom:12px !important;
}
.my-12 {
margin-block:12px !important;
}
.mx-12 {
margin-inline:12px !important;
}
@media(width>=768px) {
/*paddings*/
.pt-md-42 {
padding-top:42px !important;
}
.pb-md-42 {
padding-bottom:42px !important;
}
.py-md-42 {
padding-block:42px !important;
}
.px-md-42 {
padding-inline:42px !important;
}
/*margins*/
.mt-md-42 {
margin-top:42px !important;
}
.mb-md-42 {
margin-bottom:42px !important;
}
.my-md-42 {
margin-block:42px !important;
}
.mx-md-42 {
margin-inline:42px !important;
}
/*paddings*/
.pt-md-32 {
padding-top:32px !important;
}
.pb-md-32 {
padding-bottom:32px !important;
}
.py-md-32 {
padding-block:32px !important;
}
.px-md-32 {
padding-inline:32px !important;
}
/*margins*/
.mt-md-32 {
margin-top:32px !important;
}
.mb-md-32 {
margin-bottom:32px !important;
}
.my-md-32 {
margin-block:32px !important;
}
.mx-md-32 {
margin-inline:32px !important;
}
/*paddings*/
.pt-md-24 {
padding-top:24px !important;
}
.pb-md-24 {
padding-bottom:24px !important;
}
.py-md-24 {
padding-block:24px !important;
}
.px-md-24 {
padding-inline:24px !important;
}
/*margins*/
.mt-md-24 {
margin-top:24px !important;
}
.mb-md-24 {
margin-bottom:24px !important;
}
.my-md-24 {
margin-block:24px !important;
}
.mx-md-24 {
margin-inline:24px !important;
}
/*paddings*/
.pt-md-20 {
padding-top:20px !important;
}
.pb-md-20 {
padding-bottom:20px !important;
}
.py-md-20 {
padding-block:20px !important;
}
.px-md-20 {
padding-inline:20px !important;
}
/*margins*/
.mt-md-20 {
margin-top:20px !important;
}
.mb-md-20 {
margin-bottom:20px !important;
}
.my-md-20 {
margin-block:20px !important;
}
.mx-md-20 {
margin-inline:20px !important;
}
/*paddings*/
.pt-md-18 {
padding-top:18px !important;
}
.pb-md-18 {
padding-bottom:18px !important;
}
.py-md-18 {
padding-block:18px !important;
}
.px-md-18 {
padding-inline:18px !important;
}
/*margins*/
.mt-md-18 {
margin-top:18px !important;
}
.mb-md-18 {
margin-bottom:18px !important;
}
.my-md-18 {
margin-block:18px !important;
}
.mx-md-18 {
margin-inline:18px !important;
}
/*paddings*/
.pt-md-16 {
padding-top:16px !important;
}
.pb-md-16 {
padding-bottom:16px !important;
}
.py-md-16 {
padding-block:16px !important;
}
.px-md-16 {
padding-inline:16px !important;
}
/*margins*/
.mt-md-16 {
margin-top:16px !important;
}
.mb-md-16 {
margin-bottom:16px !important;
}
.my-md-16 {
margin-block:16px !important;
}
.mx-md-16 {
margin-inline:16px !important;
}
/*paddings*/
.pt-md-14 {
padding-top:14px !important;
}
.pb-md-14 {
padding-bottom:14px !important;
}
.py-md-14 {
padding-block:14px !important;
}
.px-md-14 {
padding-inline:14px !important;
}
/*margins*/
.mt-md-14 {
margin-top:14px !important;
}
.mb-md-14 {
margin-bottom:14px !important;
}
.my-md-14 {
margin-block:14px !important;
}
.mx-md-14 {
margin-inline:14px !important;
}
/*paddings*/
.pt-md-12 {
padding-top:12px !important;
}
.pb-md-12 {
padding-bottom:12px !important;
}
.py-md-12 {
padding-block:12px !important;
}
.px-md-12 {
padding-inline:12px !important;
}
/*margins*/
.mt-md-12 {
margin-top:12px !important;
}
.mb-md-12 {
margin-bottom:12px !important;
}
.my-md-12 {
margin-block:12px !important;
}
.mx-md-12 {
margin-inline:12px !important;
}
}