Spacing

Fine-tune the inner and outer spacing of your elements with ease.

About

Spacing utilities is a class group designed to enhance the inner and outer spaces of elements. With a customizable and responsive structure, it strives to fulfill all the necessary features for your projects through simple class assignments.

In JTB_MD, two main structures are assigned to spacing utilites.

• Padding classes, which define internal spacing for elements and uses .jtbP as baseclass,
• Margin classes, which aim to control distances between elements and uses .jtbM as baseclass.

Paddings

To add internal spacing to an element in your project on all edges, you can easily use the corresponding padding class provided by JTB_MD.

.jtbP-[ 0 | 0_25 | 0_5 | 0_75 | 1 | 1_25 | 1_5 | 1_75 | 2 | 2_25 | 2_5 | 2_75 | 3 | 3_25 | 3_5 | 3_75 | 4 ] Where the numbers specified in classes represent multipliers of the main font size of the project. To make it more clear, to calculate how much space will be there as padding, you can easily convert the underscore to a period and multiply it by your base font size. For instance, if the class contains the value 1_75, it indicates that the padding will be 1.75rem.

                            <!-- Padding on all sides (0.5rem) -->
<div class='jtbP-0_5'>...</div>
                        

If your goal is to create internal spaces on two sides of an element (either horizontal or vertical edges), you can easily achieve this by adding the first letter of the relevant axis to your class base.

.jtbP[ X | Y ]-[ 0 | 0_25 | 0_5 | 0_75 | 1 | 1_25 | 1_5 | 1_75 | 2 | 2_25 | 2_5 | 2_75 | 3 | 3_25 | 3_5 | 3_75 | 4 ] where:

• X represents the left and right edges,
• Y represents the top and bottom edges,

                            <!-- Padding on Y axis (0.5rem) -->
<div class='jtbPY-0_5'>...</div>
                        

If your goal is to create internal space on only one edge of an element, you can easily achieve this by adding the first letter of the relevant edge to your class base.

.jtbP[ T | R | B | L ]-[ 0 | 0_25 | 0_5 | 0_75 | 1 | 1_25 | 1_5 | 1_75 | 2 | 2_25 | 2_5 | 2_75 | 3 | 3_25 | 3_5 | 3_75 | 4 ] where:

• T represents the top edge,
• R represents the right edge,
• B represents the bottom edge,
• L represents the left edge.

                            <!-- Padding on top edge only (0.5rem) -->
<div class='jtbPT-0_5'>...</div>
                        

Margins

To add external spacing between elements in your project, you can easily use the corresponding margin class provided by JTB_MD.

.jtbM-[ 0 | 0_25 | 0_5 | 0_75 | 1 | 1_25 | 1_5 | 1_75 | 2 | 2_25 | 2_5 | 2_75 | 3 | 3_25 | 3_5 | 3_75 | 4 ] Where the numbers specified in classes represent multipliers of the main font size of the project. To make it more clear, to calculate how much space will be there as margin, you can easily convert the underscore to a period and multiply it by your base font size. For instance, if the class contains the value 1_75, it indicates that the margin will be 1.75rem.

                        <!-- Margin on all sides (0.5rem) -->
<span class='jtbM-0_5'>...</span>
                    

If your goal is to create external spaces on two sides of an element (either horizontal or vertical edges), you can easily achieve this by adding the first letter of the relevant axis to your class base.

.jtbM[ X | Y ]-[ 0 | 0_25 | 0_5 | 0_75 | 1 | 1_25 | 1_5 | 1_75 | 2 | 2_25 | 2_5 | 2_75 | 3 | 3_25 | 3_5 | 3_75 | 4 ] where:

• X represents the left and right edges,
• Y represents the top and bottom edges,

                        <!-- Margin on Y axis (0.5rem) -->
<div class='jtbMY-0_5'>...</div>
                    

If your goal is to create external space on only one edge of an element, you can easily achieve this by adding the first letter of the relevant edge to your class base.

.jtbM[ T | R | B | L ]-[ 0 | 0_25 | 0_5 | 0_75 | 1 | 1_25 | 1_5 | 1_75 | 2 | 2_25 | 2_5 | 2_75 | 3 | 3_25 | 3_5 | 3_75 | 4 ] where:

• T represents the top edge,
• R represents the right edge,
• B represents the bottom edge,
• L represents the left edge.

                        <!-- Margin on right edge only (0.5rem) -->
<div class='jtbMR-0_5'>...</div>
                    

                        <!-- Negative margin on left edge only (0.5rem) -->
<div class='jtbML-neg-0_5'>...</div>
                    

Responsiveness

You can make your spacings for your elements differently on different screen sizes of clients. Activate this utility by adding the corresponding screen breakpoint (defined in Breakpoints seciton) at the end of the class with a hyphen (-):

Refer to the table below to understand which parts of the utility group can be used with screen breakers: