Clases de acolchado y margen en Bootstrap 5

Mayte Mesa

El margen y el relleno son propiedades únicas de CSS que agrega espacios entre el contenedor y su contenido. Para una comprensión simple, la propiedad de margen agrega espacios fuera de la caja mientras el relleno agrega espacios dentro de la caja.

En este artículo, aprenderá sobre

Clases de margen de autos
Clases de margen con tamaños
Clases de relleno con tamaños

Términos utilizados para aplicar margen y relleno en Bootstrap 5

Los márgenes y el relleno se pueden aplicar a los elementos HTML utilizando las clases de bootsrap y para proporcionar la clase correcta, debe comprender los siguientes términos:

metro referirse como margen
pag referir como relleno
T Consulte como superior
b Consulte como fondo
s referir como inicio
mi referirse como final

Para tener una mejor comprensión de estos términos, eche un vistazo a los siguientes ejemplos.

Clases de margen de autos

Las siguientes clases de margen se utilizan para agregar espacios entre los elementos del contenedor automáticamente.

M-Auto

.M-Auto La clase da margen desde todos los lados derecha, izquierda, superior e inferior.

Código

Este artículo trata sobre clases de acolchado y margen de bootstrap para darles un conocimiento detallado sobre cómo dar margen y relleno en Bootstrap 5 usando clases.

En el ejemplo anterior, aplicamos el M-Auto Clase en Orange Div que agrega un espacio igual de todo el lado del Div.

MS-Auto

.MS-Auto La clase agrega espacio desde el lado izquierdo del div y EM representa el margen de margen.

Código

Este artículo trata sobre clases de acolchado y margen de bootstrap para darles un conocimiento detallado sobre cómo dar margen y relleno en Bootstrap 5 usando clases.

En el ejemplo anterior, aplicamos el MS-Auto Clase en Orange Div que agrega espacio desde el lado izquierdo del Div.

Yo-Auto

.Yo-Auto La clase agrega espacio desde el lado derecho del div y a mí representa el margen.

Código

Este artículo trata sobre clases de acolchado y margen de bootstrap para darles un conocimiento detallado sobre cómo dar margen y relleno en Bootstrap 5 usando clases.

En el ejemplo anterior, aplicamos el M-Auto Clase en Orange Div que agrega espacio desde el lado derecho del Div.

Clases de margen con tamaños

Las siguientes clases de margen se utilizan para agregar espacios entre los elementos del contenedor de acuerdo con el requisito del usuario.

margen-top

.tamaño de mt La clase da margen desde el lado superior, el tamaño se puede reemplazar con el 1/1/2/3/4/5.

Código

Este artículo trata sobre clases de acolchado y margen de bootstrap para darles un conocimiento detallado sobre cómo dar margen y relleno en Bootstrap 5 usando clases.

Este artículo trata sobre clases de acolchado y margen de bootstrap para darles un conocimiento detallado sobre cómo dar margen y relleno en Bootstrap 5 usando clases.

Este artículo trata sobre clases de acolchado y margen de bootstrap para darles un conocimiento detallado sobre cómo dar margen y relleno en Bootstrap 5 usando clases.

Este artículo trata sobre clases de acolchado y margen de bootstrap para darles un conocimiento detallado sobre cómo dar margen y relleno en Bootstrap 5 usando clases.

Este artículo trata sobre clases de acolchado y margen de bootstrap para darles un conocimiento detallado sobre cómo dar margen y relleno en Bootstrap 5 usando clases.

Este artículo trata sobre clases de acolchado y margen de bootstrap para darles un conocimiento detallado sobre cómo dar margen y relleno en Bootstrap 5 usando clases.

En el ejemplo anterior

Uso de caja naranja .mt-0 lo que significa que no hay margen desde la parte superior
Usos de caja rosa .MT-1 lo que significa que el margen desde la parte superior es 0.25
Uso de caja azul .mt-2 lo que significa que el margen desde la parte superior es 0.5
Green Box usa .MT-3 lo que significa que el margen desde la parte superior es 1
Uso de la caja de piel .MT-4 lo que significa que el margen desde la parte superior es 1.5
Aqua Box usa .MT-5 lo que significa que el margen desde la parte superior es 3

margen

.tamaño de mB La clase da margen desde el lado inferior, el tamaño se puede reemplazar con el 1/1/2/3/4/5.

Código

margen de arranque

.yo La clase da margen desde el lado izquierdo, el tamaño se puede reemplazar con el 1/1/2/3/4/5.

Código

margen de fin de margen

.yo La clase da margen desde el lado derecho, el tamaño se puede reemplazar con el 1/1/2/3/4/5.

Código

Usar .MT-0/1/2/3/4/5 clase para diferentes pantallas solo use .mt-xxl/lg/md/sm-0/1/2/3/4/5.

Clases de relleno con tamaños

Las siguientes clases de acolchado se utilizan para agregar espacios entre el contenido y el contenedor de acuerdo con el requisito del usuario.

acolchado superior

.de tamaño PT La clase proporciona relleno desde el lado superior, el tamaño se puede reemplazar con el 1/1/2/3/4/5.

Código

En el ejemplo anterior

Uso de caja naranja .pt-0 lo que significa que no hay relleno desde la parte superior
Usos de caja rosa .PT-1 lo que significa que el relleno desde la parte superior es 0.25
Uso de caja azul .PT-2 lo que significa que el relleno desde la parte superior es 0.5
Green Box usa .PT-3 lo que significa que el relleno desde la parte superior es 1
Uso de la caja de piel .PT-4 lo que significa que el relleno desde la parte superior es 1.5
Aqua Box usa .PT-5 lo que significa que el relleno desde la parte superior es 3

fondo acolchado

.de tamaño PB La clase da relleno desde el lado inferior, el tamaño se puede reemplazar con el 1/1/2/3/4/5.

Código

inicio

.tamaño de PS La clase da relleno desde el lado izquierdo, el tamaño se puede reemplazar con el 1/1/2/3/4/5.

Código

almohadilla

.de tamaño La clase da relleno desde el lado derecho, el tamaño se puede reemplazar con el 1/1/2/3/4/5.

Código

Usar .PT-0/1/2/3/4/5 clase para diferentes pantallas solo use .PT-XXL/LG/MD/SM-0/1/2/3/4/5.

Conclusión

Para dar uso de margen automático .Mt-Auto, .MS-Auto, .Yo-Auto clases, para dar margen de acuerdo con el uso del tamaño, .MT/B/E/S-0/1/2/3/4/5,y para usar clases de margen con tamaños en diferentes pantalla ADD .mt // b/e/s-xxl/lg/md/sm-0/1/2/3/4/5. Para relleno de acuerdo con el uso de tamaños .PT/B/E/S-0/1/2/3/4/5 o si desea dar relleno de acuerdo con diferentes tamaños de pantalla .pt // b/e/s-xxl/lg/md/sm-0/1/2/3/4/5.

Base de datos Oracle

Cómo instalar Oracle Instant Client en Linux?

El cliente Instant Oracle se puede instalar utilizando el servidor YUM, RPM y el archivo zip que se ...

Mariana Cotto

AWS

¿Cuál es la diferencia entre AWS Aurora y MySQL??

AWS Aurora es más eficiente y se usa para crear bases de datos utilizadas para la producción, y MySQ...

Andrés Barrientos

Estibador

Cómo detener todos los servicios de Docker?

Para detener todos los servicios de Docker, incluido el motor Docker y todos los contenedores en fun...

Daniela Villaseñor