Esta clase acepta muchos valores en Tailwind CSS en los que todas las propiedades están cubiertas en forma de clase. Es la alternativa a la propiedad de relleno CSS . Esta clase se usa para crear espacio alrededor del elemento, dentro de cualquier borde definido. Podemos configurar diferentes rellenos para lados individuales (superior, derecho, inferior, izquierdo). Es importante agregar propiedades de borde para implementar propiedades de relleno. Hay muchas propiedades de CSS que se utilizan para el relleno como CSS padding-top , CSS padding-bottom , CSS padding-right , CSS padding-left , etc.
Clases de relleno:
- p-0: Esta clase se utiliza para definir el relleno en todos los lados.
- py-0: esta clase se utiliza para definir el relleno en el eje y, es decir , relleno superior y relleno inferior .
- px-0: esta clase se utiliza para definir el relleno en el eje x, es decir , relleno-izquierda y relleno-derecha .
- pt-0: esta clase se usa especialmente para agregar relleno en la parte superior.
- pr-0: esta clase se usa especialmente para agregar relleno a la derecha.
- pb-0: esta clase se usa especialmente para agregar relleno en la parte inferior.
- pl-0: esta clase se usa especialmente para agregar relleno a la izquierda.
Nota: Puede cambiar el número «0» con los valores «rem» válidos.
p-0: Esta clase se utiliza para definir el relleno en todos los lados.
Sintaxis:
<element class="p-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 Padding Class</b> <div class="flex justify-center"> <div class="p-4 bg-green-300 w-24 h-24"> <div class="border-2 border-green-800 bg-green-600 w-16 h-16"> </div> </div> </div> </body> </html>
Producción:
py-0: esta clase se usa para definir el relleno en el eje y significa padding-top y padding-bottom .
Sintaxis:
<element class="py-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 Padding Class</b> <div class="flex justify-center"> <div class="py-4 bg-green-300 w-24 h-24"> <div class="border-2 border-green-800 bg-green-600 w-16 h-16"> </div> </div> </div> </body> </html>
Producción:
px-0: esta clase se usa para definir relleno en el eje x significa relleno-izquierda y relleno-derecha .
Sintaxis:
<element class="px-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 Padding Class</b> <div class="flex justify-center"> <div class="px-4 bg-green-300 w-24 h-24"> <div class="border-2 border-green-800 bg-green-600 w-16 h-16"> </div> </div> </div> </body> </html>
Producción:
pt-0: esta clase se usa especialmente para agregar relleno en la parte superior.
Sintaxis:
<element class="pt-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 Padding Class</b> <div class="flex justify-center"> <div class="pt-4 bg-green-300 w-24 h-24"> <div class="border-2 border-green-800 bg-green-600 w-16 h-16"> </div> </div> </div> </body> </html>
Producción:
pr-0: esta clase se usa especialmente para agregar relleno a la derecha.
Sintaxis:
<element class="pr-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 Padding Class</b> <div class="flex justify-center"> <div class="pr-4 bg-green-300 w-24 h-24"> <div class="border-2 border-green-800 bg-green-600 w-16 h-16"> </div> </div> </div> </body> </html>
Producción:
pb-0: esta clase se usa especialmente para agregar relleno en la parte inferior.
Sintaxis:
<element class="pb-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 Padding Class</b> <div class="flex justify-center"> <div class="pr-4 bg-green-300 w-24 h-24"> <div class="border-2 border-green-800 bg-green-600 w-16 h-16"> </div> </div> </div> </body> </html>
Producción:
pl-0: esta clase se usa especialmente para agregar relleno a la izquierda.
Sintaxis:
<element class="pl-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 Padding Class</b> <div class="flex justify-center"> <div class="pl-8 bg-green-300 w-24 h-24"> <div class="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