Use of spaces in Quickly

.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>
                                

Horizontal axis spaces

To achieve better control in the separation between elements on the X axis, horizontal spacing classes can be used. These classes allow to adjust the margins and the horizontal filling between the objects, providing a more consistent and precise disposition.

.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>
                                

Vertical axis spaces

To have greater control over the separation between elements on the Y axis, you can use specific vertical spacing classes. These classes allow to adjust the margins and the vertical filling between the objects, achieving a more precise and uniform disposition.

.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>
                                

Internal spacing

Adding internal space to your elements is very simple.You just have to add the class "p-n°"And it will be ready.The smallest class is "p-1", equivalent to 8px, while the maximum level is "p-5", equivalent to 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> 
                                

Internal spacing on the X-axis Update

New spacing utilities are included so that your design is even more flexible and clean.It is now possible to control horizontal padding with classes .px-1 to .px-5, which apply an 8px to 40px padding on the left and right sides.

.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> 
                                

Internal spacing on the Y-axis Update

New spacing utilities are included so that your design is even more flexible and clean.The vertical padding with classes .py-1 to .py-5, that apply an 8px range to 40px up and down.

.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> 
                                

Selective spaces

To apply selective spaced to the elements, you can do it in a simple way following these steps: if, for example, you need to add a space at the top of an element, simply add the class pt-1, pt-2, pt-3, pt-4 or pt-5. These classes correspond to the upper spaced of 16px, 24px, 32px and 40px, respectively.

Can I give different spaces to an element?

Yes, you can apply selective spaced to the elements following the same principle mentioned above.However, it will be necessary to add other classes to the element to achieve it.For example, if you want to establish an 8px upper spacing and a 40PX spacing to the right, you will have to apply two classes to the element in this way: class=".pt-1 .pr-5". In this way, you can assign spaces other than the same element.

.padding(s)-n° (Selective)

                                    
    <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>
                                

Margins to the elements

Adding margins to the elements is very easy.You just have to add the class "m-n°" And it will be ready.The smallest class is "m-1", equivalent to 8px; "m-2" to 16px; "m-3" to 24px; "m-4" to 32px; and "m-5" to 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> 
                        

Selective margins

To add selective margins to the elements, you can do it in a simple way following these steps: if, for example, you need to add a margin at the top of an element, simply add the class mt-1, mt-2, mt-3, mt-4 or mt-5. These classes correspond to the higher margins of 16px, 24px, 32px and 40px, respectively.

Can I give different margins to an element?

Yes, you can apply selective margins to the elements following the same previously mentioned approach.However, you will need to add other classes to the element to achieve it.For example, if you are looking to establish an 8PX upper margin and a 40PX margin to the right, you will need to apply two classes to the element in this way: class=".mt-1 .mr-5". In this way, you can assign margins other than the same element.In addition, instead of "margin", use "selective margin."

.margin(s)-n° (Selective)

                                    
    <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>