Primer CSS es un marco CSS gratuito de código abierto construido sobre principios que sientan la inspiración para los elementos de diseño fundamentales, incluidos el espacio, la fuente y el color. Estos patrones son robustos e interoperables debido a su estructura metódica. Las ideas de CSS orientado a objetos, el CSS básico y la arquitectura BEM definen su enfoque de CSS. Es bastante versátil y reutilizable. Fue creado utilizando el sistema de diseño GitHub.
El relleno es una técnica de CSS para aumentar la cantidad de espacio que rodea el contenido interno de un elemento dentro de cualquier borde que lo rodee. Primer CSS utiliza la escala de espaciado global para decidir cuánto relleno se agregará, asegurando que el relleno horizontal y vertical sea consistente. Podemos usar esta herramienta para generar diferentes diseños con los mismos estilos ya que nos ayuda a reducir la cantidad de CSS personalizado con las mismas características.
En Relleno direccional, podemos agregar relleno en cualquier dirección que deseemos y se puede usar con una escala de espaciado de 0-6 . Pero en el Relleno direccional extendido, podemos aumentar el relleno aún más a la escala de espaciado de 7 a 12. Funciona en todas las variantes receptivas excepto el px.
Clases usadas:
- pt-[7-12]: esta clase agrega relleno en la parte superior de un elemento al que se agrega y podemos variar la cantidad del valor del espaciador 7-12 .
- pb-[7-12]: esta clase agrega relleno en la parte inferior de un elemento al que se agrega y podemos variar la cantidad del valor del espaciador 7-12.
- pr-[7-12]: esta clase agrega relleno a la derecha de un elemento al que se agrega y podemos variar la cantidad del valor del espaciador 7-12 .
- pl-[7-12]: esta clase agrega relleno a la izquierda de un elemento al que se agrega y podemos variar la cantidad del valor del espaciador 7-12 .
- py-[7-12]: esta clase agrega relleno en la parte superior e inferior de un elemento al que se agrega y podemos variar la cantidad del valor del espaciador 7-12 .
Nota: px-[7-12] no funciona porque el relleno extendido no funciona en los lados izquierdo y derecho de un elemento.
Sintaxis:
<div class="pt-7">
. . . .
</div>
Ejemplo 1: Este ejemplo ilustra la adición de relleno a los lados derecho e izquierdo de un elemento con valores de escala de espaciador de 8 y 10 respectivamente.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet"/> <title>Primer CSS Extended Directional Padding</title> </head> <body> <div class="m-4"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3>Primer CSS Extended Directional Padding</h3> <br/> </div> <div class="pr-8 pl-10 color-bg-open-emphasis d-inline-block m-3"> <div class="color-bg-subtle p-1"> I have padding on right and left! </div> </div> </body> </html>
Producción:
Ejemplo 2: Este ejemplo ilustra la adición de relleno en la parte superior e inferior de un elemento con valores de escala de espaciador de 7 y 9 respectivamente.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> <title>Primer CSS Extended Directional Padding</title> </head> <body> <div class="m-4"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3>Primer CSS Extended Directional Padding</h3> <br/> </div> <div class="pt-7 pb-9 color-bg-open-emphasis d-inline-block m-4"> <div class="color-bg-subtle p-1"> I have padding on right and left! </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/padding#extended-direccional-padding
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA