En Tailwind CSS, un margen se utiliza para controlar el espaciado alrededor del elemento específico. Agrega espacio entre el elemento aplicado y sus elementos circundantes. Tailwind CSS proporciona un conjunto de utilidades de margen y valores de margen que permite a los usuarios personalizar el espaciado alrededor de los elementos deseados. Además, los usuarios pueden agregar un margen a un solo lado, como la parte superior, inferior, izquierda o derecha de un elemento en particular.
Este blog mostrará ejemplos para agregar margen a un solo lado de un elemento en Tailwind CSS.
¿Cómo agregar margen a un solo lado en Tailwind?
Para agregar margen a un solo lado de un elemento en Tailwind, se pueden usar las siguientes clases de utilidad:
Para entenderlo mejor, revise los ejemplos proporcionados a continuación.
Ejemplo 1: agregar margen a la parte superior de un elemento
En este ejemplo, usaremos el ' mt-14 ” clase de utilidad en el “ Producción Ejemplo 2: agregar margen a la parte inferior de un elemento En este ejemplo, usaremos el ' mb-14 'clase en el' Ejemplo 3: agregar margen a la izquierda de un elemento En este ejemplo, usaremos el ' ml-14 'clase en el' Ejemplo 4: agregar margen a la derecha de un elemento En este ejemplo, usaremos el ' mr-14 'clase en el' Para agregar margen a un solo lado de un elemento en Tailwind, se pueden usar varias clases de utilidades, como ' ml-
< división clase = 'h-96 mt-14 bg-púrpura-500' >
< pag clase = 'texto-5xl texto-centro' > Margen en CSS viento de cola pag >
división >
cuerpo >
Aquí:
El resultado anterior muestra que el margen se ha agregado a la parte superior del contenedor.
< división clase = 'h-96 mb-14 bg-púrpura-500' >
< pag clase = 'texto-5xl texto-centro' > Margen en CSS viento de cola pag >
división >
cuerpo >
Producción
Se puede ver que el margen se ha agregado al fondo del contenedor.
< división clase = 'h-96 ml-14 bg-morado-500' >
< pag clase = 'texto-5xl texto-centro' > Margen en CSS viento de cola pag >
división >
cuerpo >
Producción
El resultado anterior muestra que el margen se ha agregado a la izquierda del elemento contenedor.
< división clase = 'h-96 mr-14 bg-púrpura-500' >
< pag clase = 'texto-5xl texto-centro' > Margen en CSS viento de cola pag >
división >
cuerpo >
Producción
Como puede ver, el margen se ha agregado de manera eficiente a la derecha del contenedor. Conclusión