El relleno 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.
Primer relleno CSS:
- Taquigrafía : el relleno tiene muchas variaciones, que se pueden usar en muchos lugares, la convención de nomenclatura abreviada para ayudarnos a recordar los nombres de las clases.
- Relleno uniforme : esta utilidad se puede usar con una escala de espaciado de 0 a 6 usando las clases p-0, p-1, etc.
- Relleno direccional: esta utilidad puede cambiar o anular el relleno predeterminado y se puede utilizar con una escala de espaciado de 0 a 6. Esto aplica relleno a los lados individuales del eje X y el eje Y del elemento.
- Relleno direccional extendido : esta escala de relleno direccional extendido comienza desde el espaciador 7 y sube hasta 12 usando las clases pt-7, pt-8, etc. Se admiten todas las direcciones y sus variantes receptivas, excepto px.
- Relleno receptivo : esta utilidad se puede usar según el punto de interrupción utilizando la siguiente fórmula, p-[dirección]-[punto de interrupción]-[espaciador] . Cada estilo receptivo se aplica al punto de interrupción especificado y hacia arriba.
- Relleno de contenedor receptivo : está diseñado para usarse con estilos de contenedor. El relleno se agrega en los lados izquierdo y derecho de un elemento utilizando la clase de respuesta p .
Sintaxis:
<div class="Primer-CSS-Padding-Type">o ... </div>
Ejemplo 1: El siguiente código demuestra las utilidades de relleno uniforme usando las clases requeridas en él.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Typography</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/Primer/0.0.0-20220329110403/primer.css"> </head> <body> <center> <h1 class="color-fg-open">GeeksforGeeks</h1> <strong>Primer CSS Padding</strong> </center> <strong>p-0:</strong> <div class="p-0 color-bg-success"> I am the Outer Box <div class="border-green-800 color-bg-success-emphasis"> I am the inner box </div> </div> <strong>p-1:</strong> <div class="p-1 color-bg-success"> I am the Outer Box <div class="border-green-800 color-bg-success-emphasis"> I am the inner box </div> </div> <strong>p-2:</strong> <div class="p-2 color-bg-success"> I am the Outer Box <div class="border-green-800 color-bg-success-emphasis"> I am the inner box </div> </div> <strong>p-3:</strong> <div class="p-3 color-bg-success"> I am the Outer Box <div class="border-green-800 color-bg-success-emphasis"> I am the inner box </div> </div> <strong>p-4:</strong> <div class="p-4 color-bg-success"> I am the Outer Box <div class="border-green-800 color-bg-success-emphasis"> I am the inner box </div> </div> <strong>p-5:</strong> <div class="p-5 color-bg-success"> I am the Outer Box <div class="border-green-800 color-bg-success-emphasis"> I am the inner box </div> </div> <strong>p-6:</strong> <div class="p-6 color-bg-success"> I am the Outer Box <div class="border-green-800 color-bg-success-emphasis"> I am the inner box </div> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente código demuestra las utilidades de relleno direccional.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Padding</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/Primer/0.0.0-20220329110403/primer.css"> </head> <body class="p-2"> <center> <h1 class="color-fg-open">GeeksforGeeks</h1> <strong>Primer CSS Padding</strong> </center> <strong>pt-2:</strong> <div class="pt-2 color-bg-success"> I am the Outer Box <div class="border-green-800 p-2 color-bg-success-emphasis"> I am the inner box </div> </div> <strong>pr-2:</strong> <div class="pr-2 color-bg-success"> I am the Outer Box <div class="border-green-800 p-2 color-bg-success-emphasis"> I am the inner box </div> </div> <strong>pb-2:</strong> <div class="pb-2 color-bg-success"> I am the Outer Box <div class="border-green-800 p-2 color-bg-success-emphasis"> I am the inner box </div> </div> <strong>pl-2:</strong> <div class="p-3 color-bg-success"> I am the Outer Box <div class="border-green-800 p-2 color-bg-success-emphasis"> I am the inner box </div> </div> <strong>py-2:</strong> <div class="py-2 color-bg-success"> I am the Outer Box <div class="border-green-800 p-2 color-bg-success-emphasis"> I am the inner box </div> </div> <strong>px-2:</strong> <div class="px-2 color-bg-success"> I am the Outer Box <div class="border-green-800 p-2 color-bg-success-emphasis"> I am the inner box </div> </div> </body> </html>
Producción:
Enlace de referencia: https://primer.style/css/utilities/padding
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA