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. Está creado con el sistema de diseño de GitHub.
Primer CSS Box se utiliza para mostrar el contenido en el cuadro de esquina redondeada simple. Primer CSS Box Padding Density se utiliza para cambiar la densidad de relleno de los elementos del cuadro. En este artículo, discutiremos la densidad de relleno de caja de Primer CSS.
Primer CSS Box Padding Clases de densidad:
- Box-condensed: esta clase se utiliza para reducir el relleno vertical y la altura de línea condensada.
- Box–spacious: esta clase se utiliza para aumentar el relleno y el tamaño de fuente del título.
Sintaxis:
<div class="Box Box-Padding-Density-Class">
...
</div>
Ejemplo 1: El siguiente código demuestra la densidad de relleno de caja de Primer CSS usando la clase condensada de caja .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Box Padding Density </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Box Padding Density </h3> </div><br><br> <div class="Box Box--condensed"> <div class="Box-header"> <h4 class="Box-title"> GeeksforGeeks </h4> </div> <div class="Box-row"> GFG Body </div> <div class="Box-row"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" > </div> <div class="Box-row"> A Computer Science portal for geeks </div> </div> </body> </html>
Producción:
Primer CSS Box Padding Density usando Box-condensed
Ejemplo 2: el siguiente código demuestra la densidad de relleno de caja de Primer CSS usando la clase Box–spacious .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Box Padding Density </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Box Padding Density </h3> </div> <br> <br> <div class="Box Box--spacious"> <div class="Box-header"> <h4 class="Box-title"> GeeksforGeeks </h4> </div> <div class="Box-row"> GFG Body </div> <div class="Box-row"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" > </div> <div class="Box-row"> A Computer Science portal for geeks </div> <div class="Box-row"> Portal for geeks </div> </div> </body> </html>
Producción:
Primer CSS Box Padding Density usando Box–spacious
Referencia: https://primer.style/css/components/box#box-padding-density
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA