En Tailwind CSS, el ' espacio entre Las utilidades se utilizan para controlar el espacio entre elementos secundarios de contenedores flexibles o de cuadrícula. Ofrece varias clases, como “espacio-x-
Esta guía ejemplificará el método de utilizar un valor de espacio negativo en Tailwind.
¿Cómo utilizar un valor de espacio negativo en Tailwind?
Para utilizar un valor de espacio negativo en Tailwind, primero, cree una estructura HTML. Luego, usa el guión “ – ” con el “espacio entre” clases de utilidad deseado para convertirlo en un valor negativo. El ' -espacio-x-
Repasemos los siguientes ejemplos para entenderlo mejor.
Ejemplo 1: Aplicar un espaciado horizontal negativo entre elementos
En este ejemplo, tenemos un contenedor flexible con algunos elementos secundarios seguidos. Usaremos el “ -espacio-x-8 Clase para aplicar el espacio horizontal negativo entre elementos flexibles:
< cuerpo >< div clase = 'flex -space-x-8 m-10 h-20 w-max' >
< div clase = 'bg-verde azulado-500 w-20 p-5 borde-2 borde-verde azulado-800' > 1 div >
< div clase = 'bg-verde azulado-500 w-20 p-5 borde-2 borde-verde azulado-800' > 2 div >
< div clase = 'bg-verde azulado-500 w-20 p-5 borde-2 borde-verde azulado-800' > 3 div >
< div clase = 'bg-verde azulado-500 w-20 p-5 borde-2 borde-verde azulado-800' > 4 div >
< div clase = 'bg-verde azulado-500 w-20 p-5 borde-2 borde-verde azulado-800' > 5 div >
< div clase = 'bg-verde azulado-500 w-20 p-5 borde-2 borde-verde azulado-800' > 6 div >
div >
cuerpo >
Aquí, en el elemento padres
-
- “ doblar La clase 'crea un diseño flexible.
- “ -espacio-x-8 La clase agrega 8 unidades de espacio horizontal negativo entre elementos flexibles dentro de un contenedor.
- “ m-10 La clase ”añade un margen de 10 unidades a todos los lados del contenedor.
- “ h-20 La clase 'establece la altura del contenedor en 20 unidades.
- “ w-max La clase 'establece el ancho del contenedor en su ancho máximo de contenido.
En los elementos secundarios
-
- “ bg-verde azulado-500 La clase 'establece el fondo de los elementos flexibles en verde azulado.
- “ w-20 La clase 'establece el ancho de cada elemento flexible en 20 unidades.
- “ página 5 La clase 'agrega 5 unidades de acolchado a todos los lados de cada elemento flexible.
- “ frontera-2 La clase 'establece el ancho del borde del contenedor en 2 unidades.
- “ borde-verde azulado-800 La clase 'aplica el color verde azulado al borde.
Producción
El resultado anterior muestra que los elementos flexibles se superponen. Esto indica que el valor del espacio horizontal negativo se ha aplicado correctamente.
Ejemplo 2: Aplicar un espaciado vertical negativo entre elementos
En este ejemplo, tenemos un contenedor flexible con algunos elementos secundarios en una columna. Usaremos el “ -espacio-y-7 Clase para aplicar el espacio vertical negativo entre elementos flexibles:
< cuerpo >< div clase = 'flex flex-col -espacio-y-7 m-10 centro-texto' >
< div clase = 'bg-verde azulado-500 p-5 borde-2 borde-verde azulado-800' > 1 div >
< div clase = 'bg-verde azulado-500 p-5 borde-2 borde-verde azulado-800' > 2 div >
< div clase = 'bg-verde azulado-500 p-5 borde-2 borde-verde azulado-800' > 3 div >
< div clase = 'bg-verde azulado-500 p-5 borde-2 borde-verde azulado-800' > 4 div >
div >
cuerpo >
Aquí:
-
- “ doblar La clase 'crea un diseño flexible.
- “ flex-col La clase alinea los elementos flexibles en dirección vertical.
- “ -espacio-y-5 La clase agrega 7 unidades de espacio vertical negativo entre elementos flexibles dentro de un contenedor.
- “ m-10 La clase ”añade un margen de 10 unidades a todos los lados del contenedor.
- “ centro de texto La clase 'alinea el texto del contenedor al centro.
Producción
Se puede ver que los elementos flexibles se superponen. Esto indica que el valor del espacio vertical negativo se ha aplicado correctamente.
Conclusión
Para usar un valor de espacio negativo en Tailwind, use el botón ' -espacio-x-