Brecha de CSS de viento de cola

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *