Primer CSS es un marco CSS gratuito de código abierto que se crea con el sistema de diseño de GitHub para brindar soporte a la amplia gama de sitios web de Github. Crea 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 un modelo altamente reutilizable.
Primer CSS Spacing se puede utilizar para proporcionar la sangría alrededor del elemento mediante la implementación de las clases definidas, es decir, se utiliza para proporcionar el espacio dentro de los componentes, como botones, elementos de formulario, etc. Se utiliza principalmente para lograr una mayor vertical, así como espaciado horizontal entre las secciones.
Componentes de espaciado de Primer CSS:
- Escala de espaciado : es un rango predefinido de valores que se usa para especificar la cantidad de utilidades como margen, relleno, etc. Se usa en Primer CSS es una escala de base 8, su uso es extremadamente flexible porque podemos multiplicar o dividimos el ocho tantas veces como queramos y nos quedarán números enteros.
- Escala de espaciado ampliada : Añade seis opciones más a la escala de espaciado existente. Eso significa que la escala que tenía el rango de 0-6 ahora se incrementa a 7-12. Pero este rango extendido no funciona para todas las clases de servicios públicos en todas las direcciones. Podemos usar la clase extendida en margen y relleno. El rango extendido, es decir, 7-12 no funciona en el eje x, pero funciona en los lados izquierdo y derecho individualmente para margen y relleno. Pero para el margen, no podemos usar ese rango de 7-12 para el eje x completo, ni juntos ni individualmente. A diferencia de la escala de escala básica en la parte extendida, el valor aumenta en 16 px en lugar de 8 px.
- Espaciado basado en em : se utiliza principalmente para proporcionar el espaciado entre los componentes, teniendo los valores en em, para los cuales el valor combinado con la tipografía, la altura de la línea o la altura total se convierten en números sensibles.
Sintaxis:
<div class="Primer-CSS-SpacingClasses"> ... </div>
Podemos proporcionar espacio alrededor del elemento de 2 maneras, es decir, usando el relleno y el margen que crearán espacio alrededor de los elementos.
Consulte los artículos Primer CSS Padding y Primer CSS Margin para obtener una descripción detallada.
Ejemplo 1: Este ejemplo describe Primer CSS Spacing demostrando las utilidades de relleno uniforme usando las clases requeridas en él.
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Primer CSS Spacing</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <center> <h1 class="color-fg-open"> GeeksforGeeks </h1> <h3>Primer CSS Spacing</h3> </center> <strong>p-0:</strong> <div class="p-0 color-bg-success"> GeeksforGeeks </div> <strong>p-1:</strong> <div class="p-1 color-bg-success"> GeeksforGeeks </div> <strong>p-2:</strong> <div class="p-2 color-bg-success"> GeeksforGeeks </div> <strong>p-3:</strong> <div class="p-3 color-bg-success"> GeeksforGeeks </div> <strong>p-4:</strong> <div class="p-4 color-bg-success"> GeeksforGeeks </div> <strong>p-5:</strong> <div class="p-5 color-bg-success"> GeeksforGeeks </div> <strong>p-6:</strong> <div class="p-6 color-bg-success"> GeeksforGeeks </div> </body> </html>
Producción:
Ejemplo 2: Este ejemplo describe Primer CSS Spacing demostrando las utilidades de margen uniforme usando las clases requeridas en él.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Primer CSS Spacing</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="m-4"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h2>Primer CSS Spacing</h2> </div> <div class="d-flex flex-items-baseline flex-justify-around"> <div class="color-bg-success"> <div class="m-0 p-1 color-bg-success-emphasis"> .m-0 </div> </div> <div class="color-bg-success"> <div class="m-1 p-1 color-bg-success-emphasis"> .m-1 </div> </div> <div class="color-bg-success"> <div class="m-2 p-1 color-bg-success-emphasis"> .m-2 </div> </div> <div class="color-bg-success"> <div class="m-3 p-1 color-bg-success-emphasis"> .m-3 </div> </div> <div class="color-bg-success"> <div class="m-4 p-1 color-bg-success-emphasis"> .m-4 </div> </div> <div class="color-bg-success"> <div class="m-5 p-1 color-bg-success-emphasis"> .m-5 </div> </div> <div class="color-bg-success"> <div class="m-6 p-1 color-bg-success-emphasis"> .m-6 </div> </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/support/spacing