유틸 - 스페이싱(마진&패딩)

    <style>
        
        p {
            border: 1px solid #2e2e2e;
            margin: 10px;
            display: inline-block;
        }
        div{
            height: 70px;
            width: 70px;
            border: 2px solid #4e4e4e;
            /* display: inline-block; */
        }
        body {
            margin-bottom: 500px;
        }
    </style>

    <!-- PADDINGS -->

    <p>Paragraph text without any paddings</p>
    <p class="p-1">Text with 1 padding</p>
    <p class="p-2">Text with 2 padding</p>
    <p class="p-3">Text with 3 padding</p>
    <p class="p-4">Text with 4 padding</p>
    <p class="p-5">Text with 5 padding</p>
    <p class="p-0">Text with 0 padding</p>
    
    <br>
    <br>
    <hr>
    <br>

    <p>Without any paddings</p>
    <p class="pt-5">Padding top 5</p>
    <p class="pb-5">Padding bottom 5</p>
    <p class="ps-5">Padding start 5</p>
    <p class="pe-5">Padding end 5</p>

    <p class="px-5">Padding X 5</p>
    <p class="py-5">Padding Y 5</p>

    <br>
    <br>
    <hr>
    <br>

    <!-- MARGINS -->

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

    <div class="mx-auto"></div>