Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible.
El relleno se usa para crear espacio alrededor del elemento, dentro de cualquier borde definido. Hay diferentes tipos de relleno en Primer CSS, como relleno abreviado, relleno uniforme, relleno direccional, relleno direccional extendido, relleno sensible y mucho más. En este artículo, discutiremos el relleno direccional en Primer CSS.
El relleno direccional utiliza utilidades direccionales para aplicar relleno a un lado individual o a los ejes X e Y de un elemento. Las utilidades direccionales pueden cambiar o anular el relleno predeterminado y se pueden usar con una escala de espaciado de 0 a 6.
Primer CSS Clases utilizadas de relleno direccional:
- .pt-(0-6): esta clase se usa para crear relleno en la parte superior del contenedor.
- .pr-(0-6): Esta clase se usa para crear relleno a la derecha del contenedor.
- .pb-(0-6): esta clase se usa para crear relleno en la parte inferior del contenedor.
- .pl-(0-6): esta clase se usa para crear relleno a la izquierda del contenedor.
- .py-(0-6): esta clase se usa para crear relleno en la parte superior e inferior del contenedor.
- .px-(0-6): esta clase se usa para crear relleno a la izquierda y derecha del contenedor.
Sintaxis:
<div class="pt-3">
...
</div>
Ejemplo 1: este ejemplo demuestra la clase de relleno superior, inferior, izquierda y derecha en Primer CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Primer CSS</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" /> </head> <body> <center> <h1 style="color: green">GeeksforGeeks</h1> <strong>Primer CSS Directional Padding</strong> <br> <div class="pt-1 mr-3 color-bg-success d-inline-block"> <div class="color-bg-attention p-1">.pt-1</div> </div> <div class="pt-2 mr-3 color-bg-success d-inline-block"> <div class="color-bg-attention p-1">.pt-2</div> </div> <div class="pt-3 mr-3 color-bg-success d-inline-block"> <div class="color-bg-attention p-1">.pt-3</div> </div> <div class="pt-4 mr-3 color-bg-success d-inline-block"> <div class="color-bg-attention p-1">.pt-4</div> </div> <div class="pt-5 mr-3 color-bg-success d-inline-block"> <div class="color-bg-attention p-1">.pt-5</div> </div> <div class="pt-6 mr-3 color-bg-success d-inline-block"> <div class="color-bg-attention p-1">.pt-6</div> </div> <br /> <br /> <br /> <div class="pr-1 mr-3 color-bg-success d-inline-block"> <div class="color-bg-subtle p-1">.pr-1</div> </div> <div class="pr-2 mr-3 color-bg-success d-inline-block"> <div class="color-bg-subtle p-1">.pr-2</div> </div> <div class="pr-3 mr-3 color-bg-success d-inline-block"> <div class="color-bg-subtle p-1">.pr-3</div> </div> <div class="pr-4 mr-3 color-bg-success d-inline-block"> <div class="color-bg-subtle p-1">.pr-4</div> </div> <div class="pr-5 mr-3 color-bg-success d-inline-block"> <div class="color-bg-subtle p-1">.pr-5</div> </div> <div class="pr-6 mr-3 color-bg-success d-inline-block"> <div class="color-bg-subtle p-1">.pr-6</div> </div> <br /> <br /> <br /> <div class="pb-1 mr-3 color-bg-success d-inline-block"> <div class="color-bg-subtle p-1">.pb-1</div> </div> <div class="pb-2 mr-3 color-bg-success d-inline-block"> <div class="color-bg-subtle p-1">.pb-2</div> </div> <div class="pb-3 mr-3 color-bg-success d-inline-block"> <div class="color-bg-subtle p-1">.pb-3</div> </div> <div class="pb-4 mr-3 color-bg-success d-inline-block"> <div class="color-bg-subtle p-1">.pb-4</div> </div> <div class="pb-5 mr-3 color-bg-success d-inline-block"> <div class="color-bg-subtle p-1">.pb-5</div> </div> <div class="pb-6 mr-3 color-bg-success d-inline-block"> <div class="color-bg-subtle p-1">.pb-6</div> </div> <br /> <br /> <br /> <div class="pl-1 mr-3 color-bg-success d-inline-block"> <div class="color-bg-subtle p-1">.pl-1</div> </div> <div class="pl-2 mr-3 color-bg-success d-inline-block"> <div class="color-bg-subtle p-1">.pl-2</div> </div> <div class="pl-3 mr-3 color-bg-success d-inline-block"> <div class="color-bg-subtle p-1">.pl-3</div> </div> <div class="pl-4 mr-3 color-bg-success d-inline-block"> <div class="color-bg-subtle p-1">.pl-4</div> </div> <div class="pl-5 mr-3 color-bg-success d-inline-block"> <div class="color-bg-subtle p-1">.pl-5</div> </div> <div class="pl-6 mr-3 color-bg-success d-inline-block"> <div class="color-bg-subtle p-1">.pl-6</div> </div> </center> </body> </html>
Producción:
Producción
Ejemplo 2: Este ejemplo demuestra la clase de relleno de los ejes tx e y en Primer CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Primer CSS</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" /> </head> <body> <center> <h1 style="color: green">GeeksforGeeks</h1> <strong>Primer CSS Directional Padding</strong> <br> <div class="px-1 mr-3 color-bg-success d-inline-block"> <div class="color-bg-attention p-1">.px-1</div> </div> <div class="px-2 mr-3 color-bg-success d-inline-block"> <div class="color-bg-attention p-1">.px-2</div> </div> <div class="px-3 mr-3 color-bg-success d-inline-block"> <div class="color-bg-attention p-1">.px-3</div> </div> <div class="px-4 mr-3 color-bg-success d-inline-block"> <div class="color-bg-attention p-1">.px-4</div> </div> <div class="px-5 mr-3 color-bg-success d-inline-block"> <div class="color-bg-attention p-1">.px-5</div> </div> <div class="px-6 mr-3 color-bg-success d-inline-block"> <div class="color-bg-attention p-1">.px-6</div> </div> <br /> <br /> <br /> <div class="py-1 mr-3 color-bg-success d-inline-block"> <div class="color-bg-subtle p-1">.py-1</div> </div> <div class="py-2 mr-3 color-bg-success d-inline-block"> <div class="color-bg-subtle p-1">.py-2</div> </div> <div class="py-3 mr-3 color-bg-success d-inline-block"> <div class="color-bg-subtle p-1">.py-3</div> </div> <div class="py-4 mr-3 color-bg-success d-inline-block"> <div class="color-bg-subtle p-1">.py-4</div> </div> <div class="py-5 mr-3 color-bg-success d-inline-block"> <div class="color-bg-subtle p-1">.py-5</div> </div> <div class="py-6 mr-3 color-bg-success d-inline-block"> <div class="color-bg-subtle p-1">.py-6</div> </div> </center> </body> </html>
Producción:
Producción
Referencia: https://primer.style/css/utilities/padding#direccional-padding
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA