Estas clases aceptan muchos valores en Tailwind CSS en los que todas las propiedades están cubiertas en forma de clase. Estas son la alternativa a las propiedades CSS Superior/Derecha/Inferior/Izquierda. Estas clases se usan para controlar la alineación de un elemento posicionado. Recuerde que podemos usar estas propiedades solo con elementos posicionados.
Clases superior/derecha/inferior/izquierda:
- .recuadro-0
- .recuadro-y-0
- .recuadro-x-0
- .top-0
- .derecho-0
- .bottom-0
- .izquierda-0
El valor predeterminado de las utilidades superior/derecha/inferior/izquierda/recuadro en Tailwind es 0 y auto .
Nota: Puede cambiar el número «0» con los valores «rem» válidos.
recuadro-0: se utiliza para proporcionar un valor de 0px a las propiedades superior/derecha/inferior/izquierda del elemento.
Sintaxis:
<element class="inset-0">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> </head> <body> <div class="text-green-600 font-bold m-4"> <h1 class="text-3xl my-4" >GeeksforGeeks</h1> <p class=" text-2xl">Top/Right/Bottom/Left</p> </div> <div class="relative h-24 w-24 bg-green-400 m-4"> <div class="absolute inset-0 bg-green-800"></div> </div> </body> </html>
Producción:
recuadro-0
recuadro-y-0: se utiliza para proporcionar el valor 0px a la propiedad superior e inferior del elemento.
Sintaxis:
<element class="inset-y-0">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> </head> <body> <div class="text-green-600 font-bold m-4"> <h1 class="text-3xl my-4" >GeeksforGeeks</h1> <p class=" text-2xl">Top/Right/Bottom/Left</p> </div> <div class="relative h-28 w-28 bg-green-400 m-4"> <div class="absolute inset-y-0 w-16 bg-green-800"> </div> </div> </body> </html>
Producción:
inserción-y-0
recuadro-x-0: se utiliza para proporcionar el valor 0px a la propiedad derecha e izquierda del elemento.
Sintaxis:
<element class="inset-x-0">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> </head> <body> <div class="text-green-600 font-bold m-4"> <h1 class="text-3xl my-4" >GeeksforGeeks</h1> <p class=" text-2xl">Top/Right/Bottom/Left</p> </div> <div class="relative h-28 w-28 bg-green-400 m-4"> <div class="absolute inset-x-0 h-9 bg-green-800"> </div> </div> </body> </html>
Producción:
inserción-x-0
top-0 : se utiliza para proporcionar el valor 0px a la propiedad superior del elemento.
Sintaxis:
<element class="top-0">...</element>
left-0: Se utiliza para proporcionar valor 0px a la propiedad izquierda del elemento.
Sintaxis:
<element class="left-0">...</element>
Ejemplo: En este ejemplo, estamos usando las clases left-0 y top-0 .
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> </head> <body> <div class="text-green-600 font-bold m-4"> <h1 class="text-3xl my-4" >GeeksforGeeks</h1> <p class=" text-2xl">Top/Right/Bottom/Left</p> </div> <div class="relative h-36 w-36 bg-green-400 m-4"> <div class="absolute left-0 top-0 w-16 h-16 bg-green-800"> </div> </div> </body> </html>
Producción:
izquierda-0 arriba-0
right-0 : Se utiliza para proporcionar valor 0px a la propiedad derecha del elemento.
Sintaxis:
<element class="right-0">...</element>
bottom-0: Se utiliza para dar valor 0px a la propiedad bottom del elemento.
Sintaxis:
<element class="bottom-0">...</element>
Ejemplo: En este ejemplo, estamos usando las clases right-0 y bottom-0 .
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> </head> <body> <div class="text-green-600 font-bold m-4"> <h1 class="text-3xl my-4" >GeeksforGeeks</h1> <p class=" text-2xl">Top/Right/Bottom/Left</p> </div> <div class="relative h-36 w-36 bg-green-400 m-4"> <div class="absolute right-0 bottom-0 w-16 h-16 bg-green-800"> </div> </div> </body> </html>
Producción:
derecha-0 abajo-0
Publicación traducida automáticamente
Artículo escrito por archnabhardwaj y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA