Uso de espacios

.gutter-n°

                                    
    <div class="g-1 grid item-2">
        <div class="p-2 text-ac">g-1</div>
        <div class="p-2 text-ac">g-1</div>
        <div class="p-2 text-ac">g-1</div>
        <div class="p-2 text-ac">g-1</div>
    </div>
    <div class="g-5 grid item-2">
        <div class="p-2 text-ac">g-5</div>
        <div class="p-2 text-ac">g-5</div>
        <div class="p-2 text-ac">g-5</div>
        <div class="p-2 text-ac">g-5</div>
    </div>
                                

Espacios en eje horizontal

Para lograr un mejor control en la separación entre elementos en el eje X, se pueden emplear clases de espaciado horizontal. Estas clases permiten ajustar los márgenes y el relleno horizontal entre los objetos, proporcionando una disposición más coherente y precisa.

.gutterx-n°

                                    
    <div class="grid item-2 gx-2">
        <div>gy-2</div>
        <div>gy-2</div>
        <div>gy-2</div>
        <div>gy-2</div>
    </div>
                                

Espacios en eje vertical

Para tener un mayor control sobre la separación entre elementos en el eje Y, puedes utilizar clases de espaciado vertical específicas. Estas clases permiten ajustar los márgenes y el relleno vertical entre los objetos, logrando una disposición más precisa y uniforme.

.guttery-n°

                                    
    <div class="grid item-2 gy-2">
        <div>gy-2</div>
        <div>gy-2</div>
        <div>gy-2</div>
        <div>gy-2</div>
    </div>
                                

Espaciado interno

Añadir espacio interno a tus elementos es muy sencillo. Solo tienes que agregar la clase "p-n°" y estará listo. La clase más pequeña es "p-1", que equivale a 8px, mientras que el nivel máximo es "p-5", equivalente a 40px.

.padding-n°

                                    
    <div class="p-1">p-1</div>  
    <div class="p-2">p-2</div> 
    <div class="p-3">p-3</div> 
    <div class="p-4">p-4</div> 
    <div class="p-5">p-5</div> 
                                

Espaciado interno X

Se incluyen nuevas utilidades de espaciado para que tu diseño sea aún más flexible y limpio. Ahora es posible controlar el padding horizontal con las clases .px-1 a .px-5, que aplican un padding de 8px a 40px en los lados izquierdo y derecho.

.padding-n°

                                    
    <div class="px-1">px-1</div>  
    <div class="px-2">px-2</div> 
    <div class="px-3">px-3</div> 
    <div class="px-4">px-4</div> 
    <div class="px-5">px-5</div> 
                                

Espaciado interno Y Actualización

Se incluyen nuevas utilidades de espaciado para que tu diseño sea aún más flexible y limpio. El padding vertical con las clases .py-1 a .py-5, que aplican el un rango de 8px a 40px arriba y abajo.

.padding-n°

                                    
    <div class="py-1">py-1</div>  
    <div class="py-2">py-2</div> 
    <div class="py-3">py-3</div> 
    <div class="py-4">py-4</div> 
    <div class="py-5">py-5</div> 
                                

Espaciados selectivos

Para aplicar espaciados selectivos a los elementos, puedes hacerlo de manera sencilla siguiendo estos pasos: si, por ejemplo, necesitas añadir un espacio en la parte superior de un elemento, simplemente agrega la clase pt-1, pt-2, pt-3, pt-4 o pt-5. Estas clases corresponden a los espaciados superiores de 16px, 24px, 32px y 40px, respectivamente.

¿Puedo dar diferentes espaciados a un elemento?

Si, puedes aplicar espaciados selectivos a los elementos siguiendo el mismo principio que se mencionó anteriormente. Sin embargo, será necesario agregar otras clases al elemento para lograrlo. Por ejemplo, si deseas establecer un espaciado superior de 8px y un espaciado de 40px a la derecha, tendrás que aplicar dos clases al elemento de esta forma: class=".pt-1 .pr-5". De este modo, podrás asignar espacios distintos al mismo elemento.

.padding(s)-n° (Selectivo)

                                    
    <div class="pt-5">pt-5</div> 
    <div class="pr-5">pr-5</div> 
    <div class="pb-5">pb-5</div>  
    <div class="pl-5">pl-5</div>
                                

Márgenes a los elementos

Sumar márgenes a los elementos es muy fácil. Solo tienes que agregar la clase "m-n°" y estará listo. La clase más pequeña es "m-1", que equivale a 8px; "m-2" a 16px; "m-3" a 24px; "m-4" a 32px; y "m-5" a 40px.

.margin-n°

 
    <div class="m-1">m-1</div>   
    <div class="m-2">m-2</div>  
    <div class="m-3">m-3</div>  
    <div class="m-4">m-4</div>  
    <div class="m-5">m-5</div> 
                        

Márgenes selectivos

Para agregar márgenes selectivos a los elementos, puedes hacerlo de manera sencilla siguiendo estos pasos: si, por ejemplo, necesitas añadir un margen en la parte superior de un elemento, simplemente agrega la clase mt-1, mt-2, mt-3, mt-4 o mt-5. Estas clases corresponden a los márgenes superiores de 16px, 24px, 32px y 40px, respectivamente.

¿Puedo dar diferentes márgenes a un elemento?

Sí, puedes aplicar márgenes selectivos a los elementos siguiendo el mismo enfoque mencionado previamente. Sin embargo, necesitarás añadir otras clases al elemento para lograrlo. Por ejemplo, si buscas establecer un margen superior de 8px y un margen de 40px a la derecha, necesitarás aplicar dos clases al elemento de esta manera: class=".mt-1 .mr-5". De esta forma, podrás asignar márgenes distintos al mismo elemento. Además, en lugar de "margen", utiliza "margen selectivo".

.margin(s)-n° (Selectivo)

                                    
    <div class="mt-4">mt-4</div>  
    <div class="mr-4">mr-4</div>   
    <div class="mb-4">mb-4</div>  
    <div class="ml-4">ml-4</div>