Margen CSS de viento de cola

Posted on by Rudeus Greyrat

Esta clase acepta muchos valores en Tailwind CSS en los que todas las propiedades están cubiertas como en el formulario de clase. Es la alternativa a la propiedad de margen CSS . Esta clase se usa para crear espacio alrededor del elemento, fuera de cualquier borde definido. Podemos establecer diferentes márgenes para lados individuales (superior, derecho, inferior, izquierdo). Es importante agregar propiedades de borde para implementar clases de margen. Hay muchas propiedades CSS utilizadas para el margen como CSS padding-top , CSS padding-bottom , CSS padding-right , CSS padding-left , etc.

Clases de margen:

  • m-0: Esta clase se utiliza para definir el margen en todos los lados.
  • -m-0: Esta clase se utiliza para definir el margen negativo en todos los lados.
  • my-0: esta clase se utiliza para definir el margen en el eje y, es decir , margin-top y margin-bottom .
  • -my-0: esta clase se utiliza para definir el margen negativo en el eje y, es decir , margin-top y margin-bottom .
  • mx-0: esta clase se utiliza para definir el margen en el eje x, es decir , margin-left y margin-right .
  • -mx-0: Esta clase se usa para agregar un margen negativo a la derecha.
  • mt-0: esta clase se usa especialmente para agregar un margen en la parte superior.
  • -mt-0: esta clase se usa especialmente para agregar un margen negativo en la parte superior.
  • mr-0: esta clase se usa especialmente para agregar un margen a la derecha.
  • -mr-0: esta clase se usa especialmente para agregar un margen negativo a la derecha.
  • mb-0: esta clase se usa especialmente para agregar un margen en la parte inferior.
  • -mb-0: esta clase se usa especialmente para agregar un margen negativo en la parte inferior.
  • ml-0: esta clase se usa especialmente para agregar un margen a la izquierda.
  • -ml-0: esta clase se usa especialmente para agregar un margen negativo a la izquierda.

Nota: Puede cambiar el número «0» con los valores «rem» válidos.

m-0: Esta clase se utiliza para definir el margen en todos los lados.

Sintaxis:

<element class="m-0">...</element>

Ejemplo:

HTML

<!DOCTYPE html> 
<head> 
    <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 Margin Class</b> 
    <div class="flex justify-center">
    <div class="m-8 bg-green-300 w-24 h-24">
        <div class="m-4 border-2 border-green-800 
                    bg-green-600 w-16 h-16">
              
        </div>
    </div>
    </div>
</body> 
  
</html>

Producción:

-m-0: Esta clase se utiliza para definir el margen negativo en todos los lados.

Sintaxis:

<element class="-m-0">...</element>

Ejemplo:

HTML

<!DOCTYPE html> 
<head> 
    <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 Margin Class</b> 
    <div class="flex justify-center">
    <div class="m-8 bg-green-300 w-24 h-24">
        <div class="-m-4 border-2 border-green-800 
                    bg-green-600 w-16 h-16">
              
        </div>
    </div>
    </div>
</body> 
  
</html>

Producción:

my-0: esta clase se utiliza para definir el margen en el eje y, es decir , margin-top y margin-bottom .

Sintaxis:

<element class="my-0">...</element>

Ejemplo:

HTML

<!DOCTYPE html> 
<head> 
    <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 Margin Class</b> 
    <div class="flex justify-center">
    <div class="m-8 bg-green-300 w-24 h-24">
        <div class="my-4 border-2 border-green-800 
                    bg-green-600 w-16 h-16">
              
        </div>
    </div>
    </div>
</body> 
  
</html>

Producción:

-my-0: esta clase se utiliza para definir el margen negativo en el eje y, es decir , margin-top y margin-bottom .

Sintaxis:

<element class="-my-0">...</element>

Ejemplo:

HTML

<!DOCTYPE html> 
<head> 
    <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 Margin Class</b> 
    <div class="flex justify-center">
    <div class="m-8 bg-green-300 w-24 h-24">
        <div class="-my-4 border-2 border-green-800 
                    bg-green-600 w-16 h-16">
              
        </div>
    </div>
    </div>
</body> 
  
</html>

Producción:

mx-0: esta clase se utiliza para definir el margen en el eje x, es decir , margin-left y margin-right .

Sintaxis:

<element class="mx-0">...</element>

Ejemplo:

HTML

<!DOCTYPE html> 
<head> 
    <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 Margin Class</b> 
    <div class="flex justify-center">
    <div class="m-8 bg-green-300 w-24 h-24">
        <div class="mx-4 border-2 border-green-800 
                    bg-green-600 w-16 h-16">
              
        </div>
    </div>
    </div>
</body> 
  
</html>

Producción:

-mx-0: esta clase se utiliza para definir el margen negativo en el eje x, es decir , margin-left y margin-right .

Sintaxis:

<element class="-mx-0">...</element>

Ejemplo:

HTML

<!DOCTYPE html> 
<head> 
    <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 Margin Class</b> 
    <div class="flex justify-center">
    <div class="m-8 bg-green-300 w-24 h-24">
        <div class="-mx-4 border-2 border-green-800 
                    bg-green-600 w-16 h-16">
              
        </div>
    </div>
    </div>
</body> 
  
</html>

Producción:

mt-0: esta clase se usa especialmente para agregar un margen en la parte superior.

Sintaxis:

<element class="mt-0">...</element>

Ejemplo:

HTML

<!DOCTYPE html> 
<head> 
    <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 Margin Class</b> 
    <div class="flex justify-center">
    <div class="m-8 bg-green-300 w-24 h-24">
        <div class="mt-4 border-2 border-green-800 
                    bg-green-600 w-16 h-16">
              
        </div>
    </div>
    </div>
</body> 
  
</html>

Producción:

-mt-0: esta clase se usa especialmente para agregar un margen negativo en la parte superior.

Sintaxis:

<element class="-mt-0">...</element>

Ejemplo:

HTML

<!DOCTYPE html> 
<head> 
    <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 Margin Class</b> 
    <div class="flex justify-center">
    <div class="m-8 bg-green-300 w-24 h-24">
        <div class="-mt-4 border-2 border-green-800 
                    bg-green-600 w-16 h-16">
              
        </div>
    </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 *