STYLE

Spacing

Spacing is the negative area between elements and components. It is controlled in code with margin and padding.

Spacing Scale

Use the spacing scale when building individual components. It includes small increments needed to create appropriate spatial relationships for detail-level designs.

rem px Example
0.125 2
0.25 4
0.5 8
0.75 12
1 16
1.5 24
2 32
2.5 40
3 48
4 64
2rem Spacing from top
Optional Label
1rem Spacing
Heading
2rem Spacing
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur distinctio perferendis tempore fugiat . Voluptatum odit doloremque veritatis debitis provident, eum laborum nostrum id quia. Quasi alias id similique excepturi illum.
1rem Spacing
HTML AND CSS Code

HTML CODE

      
        <div class="labelcont">
            <div class="boxcont">
            <div class="box box7"></div>
            <div class="box box11">2rem Spacing from top</div> 
            </div>
            <div class="label">Optional Label</div>  
            <div class="boxcont">
                <div class="box box5"></div>
                <div class="box box12">1rem Spacing</div> 
                </div>
            <div class="label"><strong>Heading</strong></div> 
            <div class="boxcont">
                <div class="box box7"></div>
                <div class="box box11">2rem Spacing</div> 
                </div>
            <div class="label">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur distinctio perferendis tempore fugiat
                . Voluptatum odit doloremque veritatis debitis provident, eum laborum nostrum id quia. Quasi alias id similique excepturi illum.</div> 
            <div class="boxcont">
                <div class="box box5"></div>
                <div class="box box12">1rem Spacing</div> 
                </div>       
            </div>
            </div>

CSS CODE

    
        .box5{
            width:1rem;
            height:1rem;
        }
        .box7{
            width:2rem;
            height:2rem;
        }
        .box11{
            width:20rem;
            height:2rem;
            background-color:#69cff9;
            font-size: smaller;
            text-align: center;
        }
        .box12{
            width:20rem;
            height:1rem;
            background-color:#69cff9;
            font-size: smaller;
            text-align: center;
        }
        .boxcont{
            display:flex;
            flex-direction: row;
            margin-left:2rem;
            margin-right:2rem;
            margin-top:0;
        }
        .label{
            margin-left: 2rem;
        }
        .labelcont{
            margin-top:2rem;
            padding:0;
            background-color: white;
            border: 1px solid whitesmoke;
            box-shadow: 0 20px 20px -14px rgba(0, 0, 0, 0.25);
            margin-left:2rem;
            width: 400px;    
        }