Margin
Otorga a tus elementos los margenes que necesite con la utilidad para margenes unas utilidades faciles e intuitivas.
--Clases para margins
| Clase | Propiedad y valor |
|---|---|
| .m- | margin: block-start, inline-end, block-end, inline-start. |
| .ms- | margin-inline-start. |
| .me- | margin-inline-end. |
| .mt- | margin-block-start. |
| .mb- | margin-block-end. |
| .my- | margin-block-start + margin-block-end |
| .mx- | margin-inline-start + margin-inline-end |
-- Valores
| Clase/valor | Valor |
|---|---|
| 0 | 0rem |
| 1 | 0.5rem |
| 2 | 1rem |
| 3 | 1.5rem |
| 4 | 2rem |
| 5 | 2.5rem |
Uso de margin
HTML
Resultado: margin-inline-start: 1.5rem;
-- Clases especiales
Clases con unos valores mayores frente a los anteriores, pero los mismos descenderán en dispositivos móviles, es decir; que a medida los pixeles en pantallas sean menonores, el valor del margin, será menor.
| Clase | Propiedad |
|---|---|
| .mt | margin-block-start |
| .mb | margin-block-end |
| .my | margin-block-start + margin-block-end |
| Clase | Valor |
|---|---|
| sm | 50px |
| md | 100px |
| lg | 150px |
Uso de clases especiales
HTML
| Clase | Punto de corte |
|---|---|
| .pho-(propiedad)-(valor) | @media screen (max-width: 550px). |
| .pha-(propiedad)-(valor) | @media screen (max-width: 770px). |
| .tab-(propiedad)-(valor) | @media screen (max-width: 990px). |
| .lap-(propiedad)-(valor) | @media screen (max-width: 1200px). |
Ejemplo de uso con puntos de corte.
HTML
Resultado:
@media screen (max-width: 990px) {
margin-block-end: 2.5rem;
}