Esta clase acepta más de un valor en Tailwind CSS, todas las propiedades están cubiertas como en el formulario de clase. Es la alternativa a la propiedad gap de CSS . Esta clase se usa para establecer el espacio entre filas y columnas. Como columna-brecha y fila-brecha usando ambos por separado para que uno pueda usar simplemente la propiedad de brecha que puede dar tanto la columna como la brecha de fila.
Brecha: hay un total de 105 clases para la brecha, los ejes x e y también se incluyen por separado.
- brecha-0
- brecha-x-0
- brecha-y-0
- brecha-0.5
- brecha-x-0.5
- brecha-y-0.5
- brecha-1
- brecha-x-1
- brecha-y-1
- brecha-1.5
- brecha-x-1.5
- brecha-y-1.5
- brecha-2
- brecha-x-2
- brecha-y-2
- brecha-2.5
- brecha-x-2.5
- brecha-y-2.5
- brecha-3
- brecha-x-3
- brecha-y-3
- brecha-3.5
- espacio-x-3.5
- brecha-y-3.5
- brecha-4
- brecha-x-4
- brecha-y-4
- brecha-5
- brecha-x-5
- brecha-y-5
- brecha-6
- brecha-x-6
- brecha-y-6
- brecha-7
- brecha-x-7
- brecha-y-7
- brecha-8
- brecha-x-8
- brecha-y-8
- brecha-9
- brecha-x-9
- brecha-y-9
- brecha-10
- brecha-x-10
- brecha-y-10
- brecha-11
- brecha-x-11
- brecha-y-11
- brecha-12
- brecha-x-12
- brecha-y-12
- brecha-14
- brecha-x-14
- brecha-y-14
- brecha-16
- brecha-x-16
- brecha-y-16
- brecha-20
- brecha-x-20
- brecha-y-20
- brecha-24
- brecha-x-24
- brecha-y-24
- brecha-28
- brecha-x-28
- brecha-y-28
- brecha-32
- brecha-x-32
- brecha-y-32
- brecha-36
- brecha-x-36
- brecha-y-36
- brecha-40
- brecha-x-40
- brecha-y-40
- brecha-44
- brecha-x-44
- brecha-y-44
- brecha-48
- brecha-x-48
- brecha-y-48
- brecha-52
- brecha-x-52
- brecha-y-52
- brecha-56
- brecha-x-56
- brecha-y-56
- brecha-60
- brecha-x-60
- brecha-y-60
- brecha-64
- brecha-x-64
- brecha-y-64
- brecha-72
- brecha-x-72
- brecha-y-72
- brecha-80
- brecha-x-80
- brecha-y-80
- brecha-96
- brecha-x-96
- brecha-y-96
- brecha-px
- brecha-x-px
- brecha-y-px
gap-number: al usar solo la clase gap sin mencionar el eje, se mantendrá en ambos ejes de acuerdo con el número mencionado:
Sintaxis:
<element class="gap-number"> Contents... </element>
Parámetro: esta clase acepta un solo valor como se mencionó anteriormente y se describe a continuación:
- número: contiene el tamaño del espacio del elemento.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Tailwind gap Class</title> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS gap Class</b> <div id="main" class="grid grid-rows-2 grid-flow-col gap-5"> <div class="bg-green-500 rounded-lg m-4 h-12">1</div> <div class="bg-green-500 rounded-lg m-4 h-12">2</div> <div class="bg-green-500 rounded-lg m-4 h-12">3</div> <div class="bg-green-500 rounded-lg m-4 h-12">4</div> <div class="bg-green-500 rounded-lg m-4 h-12">5</div> <div class="bg-green-500 rounded-lg m-4 h-12">6</div> </div> </body> </html>
Producción:
gap-x-number: al usar la clase gap-x, se mantendrá el espacio en el eje x de acuerdo con el número mencionado:
Sintaxis:
<element class="gap-x-number"> Contents... </element>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Tailwind gap-x-number Class</title> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS gap-x-number Class</b> <div id="main" class="grid grid-rows-2 grid-flow-col gap-x-5"> <div class="bg-green-500 rounded-lg m-4 h-12">1</div> <div class="bg-green-500 rounded-lg m-4 h-12">2</div> <div class="bg-green-500 rounded-lg m-4 h-12">3</div> <div class="bg-green-500 rounded-lg m-4 h-12">4</div> <div class="bg-green-500 rounded-lg m-4 h-12">5</div> <div class="bg-green-500 rounded-lg m-4 h-12">6</div> </div> </body> </html>
Producción:
gap-y-number: al usar la clase gap-y, se mantendrá el espacio en el eje x de acuerdo con el número mencionado:
Sintaxis:
<element class="gap-y-number"> Contents... </element>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Tailwind gap-y-number Class</title> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS gap-y-number Class</b> <div id="main" class="grid grid-rows-2 grid-flow-col gap-y-5"> <div class="bg-green-500 rounded-lg m-4 h-12">1</div> <div class="bg-green-500 rounded-lg m-4 h-12">2</div> <div class="bg-green-500 rounded-lg m-4 h-12">3</div> <div class="bg-green-500 rounded-lg m-4 h-12">4</div> <div class="bg-green-500 rounded-lg m-4 h-12">5</div> <div class="bg-green-500 rounded-lg m-4 h-12">6</div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA