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 uniforme en Primer CSS.
El relleno uniforme utiliza utilidades de espaciado uniforme para aplicar el mismo relleno a todos los lados de un elemento. Estas utilidades se pueden utilizar con una escala de espaciado de 0 a 6.
Primer CSS Clases de relleno uniforme:
- .p-(0-6): esta clase se usa para crear un relleno uniforme en todos los lados del contenedor. La cantidad de relleno se define mediante el número después de p- donde 0 significa el menor relleno y 6 significa el mayor relleno.
Sintaxis:
<div class="p-3">
...
</div>
Ejemplo 1: Este ejemplo demuestra la clase de relleno uniforme 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 Uniform Padding</strong> <br> <div class="mr-3 color-bg-success d-inline-block"> <div class= "color-bg-attention p-1"> Non Padded COntainer </div> </div> <div class="p-3 mr-3 color-bg-success d-inline-block"> <div class= "color-bg-attention p-1"> Uniform padded container </div> </div> </center> </body> </html>
Producción:
Primer CSS Acolchado uniforme
Ejemplo 2: Este ejemplo demuestra el relleno uniforme desde escalas 0 hasta clases de escala 6 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 Uniform Padding</strong> <br> <div class="p-1 mr-3 color-bg-success d-inline-block"> <div class= "color-bg-attention p-1">.p-1</div> </div> <div class="p-2 mr-3 color-bg-success d-inline-block"> <div class= "color-bg-attention p-1">.p-2</div> </div> <div class="p-3 mr-3 color-bg-success d-inline-block"> <div class= "color-bg-attention p-1">.p-3</div> </div> <div class="p-4 mr-3 color-bg-success d-inline-block"> <div class= "color-bg-attention p-1">.p-4</div> </div> <div class="p-5 mr-3 color-bg-success d-inline-block"> <div class= "color-bg-attention p-1">.p-5</div> </div> <div class="p-6 mr-3 color-bg-success d-inline-block"> <div class= "color-bg-attention p-1">.p-6</div> </div> </center> </body> </html>
Producción:
Primer CSS Acolchado uniforme
Referencia: https://primer.style/css/utilities/padding#uniform-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