Padding

Facilidad de uso y variedad de clases para añadir relleno a tus elementos.

-- Clases para paddings

Clase Propiedad
.p- padding: block-start, inline-end, block-end, inline-start.
.ps- padding-inline-start.
.pe- padding-inline-end.
.pt- padding-block-start.
.pb- padding-block-end.
.py- padding-block-start + padding-block-end
.px- padding-inline-start + padding-inline-end

-- Valores

Clave Valor
0 0rem
1 0.5rem
2 1rem
3 1.5rem
4 2rem
5 2.5rem

Uso de las clase padding

HTML 
...

Resultado: padding-inline-end: 1rem;

Clases especiales

Genera paddings block-start y block-end de mayor tamaño a los del conjunto anterior.

-- Paddings
Clase Propiedad
.pt- padding-block-start
.pb- padding-block-end
.py- padding-block-start + padding-block-end
-- Tamaños
Clave Valor
sm 50px
md 100px
lg 150px
xl 200px
xl 250px

Uso de las calses especiales

HTML
-- Puntos de corte
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) {
        padding-block-start: 2.5rem;
    }