Este blog proporcionará una idea de cómo asignar el mismo espacio entre múltiples elementos en Tailwind.
¿Cómo asignar el mismo espacio entre varios elementos en Tailwind?
Los usuarios pueden asignar espacios iguales entre elementos utilizando el botón ' espacio-{x/y}-{tamaño} ”clase de utilidad. Los usuarios pueden agregar espacio en el eje x o y especificando un valor entero. La utilidad de espaciado es necesaria porque hace que la página web sea atractiva. Si una página web no tiene el espacio adecuado entre elementos, no atraerá usuarios.
Tomemos un ejemplo de código para asignar el mismo espacio entre los elementos de la cuadrícula.
Método 1: Asignar espacio en el eje X.
Un espacio igual asignado en el eje x crea un espacio igual a la derecha e izquierda del elemento. Para asignar el espacio en el eje x utilice la siguiente sintaxis:
espacio - X - { tamaño }
El tamaño puede ser cualquier valor entero.
Considere el siguiente código para asignar el mismo espacio en el eje x:
< cuerpo >< div clase = 'cuadrícula mx-4 cuadrícula-cols-4 espacio-x-4' >
< div clase = 'bg-verde-400 h-16 redondeado-lg borde-2 borde-verde-800' > 1 div >
< div clase = 'bg-verde-400 h-16 redondeado-lg borde-2 borde-verde-800' > 2 div >
< div clase = 'bg-verde-400 h-16 redondeado-lg borde-2 borde-verde-800' > 3 div >
< div clase = 'bg-verde-400 h-16 redondeado-lg borde-2 borde-verde-800' > 4 div >
div >
cuerpo >
En este código:
- “ mx-4 'Agrega un margen de 4 px en el eje x (derecha e izquierda).
- El ' red La clase crea una cuadrícula.
- El ' columnas-cuadrícula-4 ”haga 4 columnas en la cuadrícula.
- El ' espacio-x-4 'Agrega un espacio de 4px entre los elementos de la cuadrícula.
- “ bg-verde-400 ” establece el color de fondo en verde.
- “ h-16 ” establece la altura en 16px.
- El ' redondeado-lg ”hace que la esquina sea redonda y el radio del borde sea grande.
- El ' frontera-2 ”crea un borde de 2px alrededor del elemento.
- “ borde-verde-800 ”hace que el borde sea de color verde oscuro.
Producción
Obtenga una vista previa del resultado creado por el código anterior:
Se puede observar que se asigna un espacio de 4px entre los elementos.
Método 2: Asignar espacio en el eje y.
El espaciado se puede asignar en el eje y de manera similar al método anterior, mediante pequeños cambios en el código anterior. Asigna espacios a lo largo del eje y (superior e inferior). La sintaxis para ello es:
El siguiente código se puede implementar para agregar espacios a lo largo del eje y:
< cuerpo >< div clase = 'mx-4 mi-4 espacio-y-4' >
< div clase = 'bg-verde-400 h-16 redondeado-lg borde-2 borde-verde-800' > 1 div >
< div clase = 'bg-verde-400 h-16 redondeado-lg borde-2 borde-verde-800' > 2 div >
< div clase = 'bg-verde-400 h-16 redondeado-lg borde-2 borde-verde-800' > 3 div >
< div clase = 'bg-verde-400 h-16 redondeado-lg borde-2 borde-verde-800' > 4 div >
div >
cuerpo >
En este código:
- “ mx-4 'Agrega un margen de 4px a la izquierda y a la derecha de los elementos para optimizar la salida.
- “ mi-4 'Agrega un margen de 4px en el eje y (superior e inferior).
- “ espacio-y-4 'Agrega un espacio de 4px en el eje y (superior e inferior).
Producción
Guarde el código anterior y obtenga una vista previa de la página web creada por él para ver el espaciado como:
Se trata de asignar el mismo espacio entre elementos.
Conclusión
Para asignar espacio igual entre múltiples elementos en Tailwind, los usuarios pueden usar el botón ' espacio-{x/y}-{tamaño} ”clase de utilidad y especifique un valor entero como tamaño de acuerdo con el requisito. El espaciado igual entre elementos hace que el resultado sea más escalable y los espectadores permanezcan interesados en la página web. Esta publicación ha proporcionado el método para asignar el mismo espacio entre múltiples elementos en Tailwind.