Padding

Las clases de padding en Bodystyle permiten gestionar la distancia interna de los elementos mediante relleno o padding. Estas clases facilitan la aplicación de espacios internos consistentes y adaptativos en los elementos HTML, mejorando la apariencia y la legibilidad del contenido.

Introducción

Veremos a lo largo de las secciones de la documentación las clases CSS de padding que Bodystyle ofrece para gestionar el relleno interno de los elementos. Estas clases permiten ajustar el espacio interno de los elementos de manera sencilla y eficiente, mejorando la presentación y la usabilidad de las interfaces web.
Es importante ver las clases de Margin que ofrecen las mismas funcionalidades y son complementarias a las clases de padding.

pl-2
pr-2
pt-2
pb-2
    

        
pl-2

        
pr-2

        
pt-2

        
pb-2
Clase Rango Descripción
p-[0-15] p-0 a p-15 Aplica padding (relleno) uniforme en todos los lados del elemento.
pt-[0-15] pt-0 a pt-15 Aplica padding (relleno) en la parte superior del elemento.
pr-[0-15] pr-0 a pr-15 Aplica padding (relleno) en la parte derecha del elemento.
pb-[0-15] pb-0 a pb-15 Aplica padding (relleno) en la parte inferior del elemento.
pl-[0-15] pl-0 a pl-15 Aplica padding (relleno) en la parte izquierda del elemento.
px-[0-15] px-0 a px-15 Aplica padding (relleno) en los lados izquierdo y derecho del elemento.
py-[0-15] py-0 a py-15 Aplica padding (relleno) en la parte superior e inferior del elemento.

Responsive

Las clases de padding en Bodystyle también son responsivas, lo que significa que pueden adaptarse a diferentes tamaños de pantalla. Al agregar los modificadores de tamaño (como -m, -s, -xs), puedes aplicar diferentes valores de padding según el dispositivo o la resolución de pantalla. Esto permite crear diseños flexibles y adaptativos que se ven bien en dispositivos móviles, tabletas y computadoras de escritorio.

Ejemplo de padding responsivo 
    

        
        

            Ejemplo de padding responsivo
Clase Rango Descripción
p-[m|s|xs] Modificadores de tamaño Permiten aplicar padding responsivo según el tamaño de pantalla: -m (mediano), -s (pequeño), -xs (extra pequeño).
pl-[m|s|xs] Modificadores de tamaño Permiten aplicar padding responsivo según el tamaño de pantalla: -m (mediano), -s (pequeño), -xs (extra pequeño).
pr-[m|s|xs] Modificadores de tamaño Permiten aplicar padding responsivo según el tamaño de pantalla: -m (mediano), -s (pequeño), -xs (extra pequeño).
pt-[m|s|xs] Modificadores de tamaño Permiten aplicar padding responsivo según el tamaño de pantalla: -m (mediano), -s (pequeño), -xs (extra pequeño).
pb-[m|s|xs] Modificadores de tamaño Permiten aplicar padding responsivo según el tamaño de pantalla: -m (mediano), -s (pequeño), -xs (extra pequeño).

Autor