Padding

Distancia que existe entre los límites de un elemento y su contenido, en este apartado vamos a aprender a como gestionar este espacio con las clases provistas por la biblioteca para todos los tamaños de pantalla.

Padding General

Lo primero a evaluar es el padding general perteneciente a todos los tamaños de pantalla por igual sin alteraciones. La clase utilizada para esta tarea es p-[em] siendo em el tamaño del padding correspondiendose con 1em = 16px y el parámetro definido en uno son 0.5em = 8px.

.p-1 
    

        
         
            .p-1

Padding Direccionado

La biblioteca dispone de las clases necesarias para agregar padding en diferentes direcciones arriba, abajo, izquierda y derecha lo cual se verá en el siguente ejemplo.

Clase Ejemplo
.pl-10 .pl-10
.pr-10 .pr-10
.pb-10
.pb-10
.pt-10
.pt-10
 
    

        
            

                Clase
                Ejemplo
            

        
        
            

                .pl-10
                
                    .pl-10
                
            

            

                .pr-10
                
                    .pr-10
                
            

            

                .pb-10
                
                    
.pb-10

                		
            

            

                .pt-10
                
                    
.pt-10

Padding Medidas

Se pueden utilizar las clases de padding para que el mismo sea diferente en cada dispositivo donde se muestre el elemento.

p-0 pl-m-5 pr-s-5 
    

        

            p-0 pl-m-5 pr-s-5
En el ejemplo anterior se tiene un padding de 0 para equipos con pantalla superior a 1030px, mientras que para equipos menores a 1030px se le añade un padding de 2.5em a la izquierda y para equipos con menos de 770px se le añade un padding derecho de 2.5em.

Clases de Padding

Español Inglés Descripción
.p-[em] .p-[em] Padding en todas las direcciones para todo dispositivo.
.p-m-[em] .p-m-[em] Padding en todas las direcciones desde dispositivos medios.
.p-s-[em] .p-s-[em] Padding en todas las direcciones desde dispositivos chicos.
.p-xs-[em] .p-xs-[em] Padding en todas las direcciones desde dispositivos extra chicos.
.pi-[em] .pl-[em] Padding a la izquierda para todos los tamaños de pantalla.
.pd-[em] .pr-[em] Padding a la derecha para todos los tamaños de pantalla.
.par-[em] .pt-[em] Padding arriba para todos los tamaños de pantalla.
.pab-[em] .pb-[em] Padding abajo para todos los tamaños de pantalla.
.pi-m-[em] .pl-m-[em] Padding a la izquierda para dispositivos menores a 1030px.
.pd-m-[em] .pr-m-[em] Padding a la derecha para dispositivos menores a 1030px.
.par-m-[em] .pt-m-[em] Padding arriba para dispositivos menores a 1030px.
.pab-m-[em] .pb-m-[em] Padding abajo para dispositivos menores a 1030px.
.pi-s-[em] .pl-s-[em] Padding a la izquierda para dispositivos menores a 770px.
.pd-s-[em] .pr-s-[em] Padding a la derecha para dispositivos menores a 770px.
.par-s-[em] .pt-s-[em] Padding arriba para dispositivos menores a 770px.
.pab-s-[em] .pb-s-[em] Padding abajo para dispositivos menores a 770px.
.pi-xs-[em] .pl-xs-[em] Padding a la izquierda para dispositivos menores a 400px.
.pd-xs-[em] .pr-xs-[em] Padding a la derecha para dispositivos menores a 400px.
.par-xs-[em] .pt-xs-[em] Padding arriba para dispositivos menores a 400px.
.pab-xs-[em] .pb-xs-[em] Padding abajo para dispositivos menores a 400px.
Recomendación:
  • Ver los apartados de Medidas para conocer las dimensiones con las que se maneja la biblioteca.
  • Ver la documentación de los Margenes la cual es similar al actual tema sobre el padding.

Padding X e Y

La biblioteca permite establecer el padding tanto arriba y abajo como a los lados con las clases px-[em] y py-[em].
Incluye también las clases que permiten definir esta propiedad en diferentes tamaños de pantalla.

.px-5
.py-5
En el ejemplo anterior se introduce un padding arriba y abajo, y en otro contenedor un padding a la izquierda y a la derecha de 2.5em. 
    

        
.px-5

        
.py-5
Clase Rango
px-[em] [0-15]
py-[em] [0-15]
px-m-[em] [0-15]
py-m-[em] [0-15]
px-s-[em] [0-15]
py-s-[em] [0-15]
px-xs-[em] [0-15]
py-xs-[em] [0-15]

Borrar Padding

Disponemos de las clases necesarias para borrar el padding en diferentes tamaños de pantalla. Esta funcionalidad es muy útil porque permite reiniciar el padding dependiendo de lo que se necesite. Cuando tenemos un elemento con un determinado padding y en una situación específica necesitamos que el padding se borre utilizaremos las clases pertinentes para lograr esto.

Elemento Con padding 
    
    

        Elemento Con padding
`r`n