⌘ K
esc

    Margin

    Controls the space around an element.

    Classes
    Class Properties
    m-auto margin: auto;
    mx-auto margin-left: auto; margin-right: auto;
    my-auto margin-top: auto; margin-bottom: auto;
    mt-auto margin-top: auto;
    mb-auto margin-bottom: auto;
    ml-auto margin-left: auto;
    mr-auto margin-right: auto;
    m-0 margin: 0;
    m-1 margin: 0.25rem;
    m-2 margin: 0.5rem;
    m-3 margin: 1rem;
    m-4 margin: 1.5rem;
    m-5 margin: 2rem;
    m-6 margin: 3rem;
    m-7 margin: 4rem;
    m-8 margin: 5rem;
    mt-0 margin-top: 0;
    mt-1 margin-top: 0.25rem;
    mt-2 margin-top: 0.5rem;
    mt-3 margin-top: 1rem;
    mt-4 margin-top: 1.5rem;
    mt-5 margin-top: 2rem;
    mt-6 margin-top: 3rem;
    mt-7 margin-top: 4rem;
    mt-8 margin-top: 5rem;
    mr-0 margin-right: 0;
    mr-1 margin-right: 0.25rem;
    mr-2 margin-right: 0.5rem;
    mr-3 margin-right: 1rem;
    mr-4 margin-right: 1.5rem;
    mr-5 margin-right: 2rem;
    mr-6 margin-right: 3rem;
    mr-7 margin-right: 4rem;
    mr-8 margin-right: 5rem;
    mb-0 margin-bottom: 0;
    mb-1 margin-bottom: 0.25rem;
    mb-2 margin-bottom: 0.5rem;
    mb-3 margin-bottom: 1rem;
    mb-4 margin-bottom: 1.5rem;
    mb-5 margin-bottom: 2rem;
    mb-6 margin-bottom: 3rem;
    mb-7 margin-bottom: 4rem;
    mb-8 margin-bottom: 5rem;
    ml-0 margin-left: 0;
    ml-1 margin-left: 0.25rem;
    ml-2 margin-left: 0.5rem;
    ml-3 margin-left: 1rem;
    ml-4 margin-left: 1.5rem;
    ml-5 margin-left: 2rem;
    ml-6 margin-left: 3rem;
    ml-7 margin-left: 4rem;
    ml-8 margin-left: 5rem;
    mx-0 margin-left: 0;
    margin-right: 0;
    mx-1 margin-left: 0.25rem;
    margin-right: 0.25rem;
    mx-2 margin-left: 0.5rem;
    margin-right: 0.5rem;
    mx-3 margin-left: 1rem;
    margin-right: 1rem;
    mx-4 margin-left: 1.5rem;
    margin-right: 1.5rem;
    mx-5 margin-left: 2rem;
    margin-right: 2rem;
    mx-6 margin-left: 3rem;
    margin-right: 3rem;
    mx-7 margin-left: 4rem;
    margin-right: 4rem;
    mx-8 margin-left: 5rem;
    margin-right: 5rem;
    my-0 margin-top: 0;
    margin-bottom: 0;
    my-1 margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    my-2 margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    my-3 margin-top: 1rem;
    margin-bottom: 1rem;
    my-4 margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    my-5 margin-top: 2rem;
    margin-bottom: 2rem;
    my-6 margin-top: 3rem;
    margin-bottom: 3rem;
    my-7 margin-top: 4rem;
    margin-bottom: 4rem;
    my-8 margin-top: 5rem;
    margin-bottom: 5rem;
    -m-1 margin: -0.25rem;
    -m-2 margin: 0-.5rem;
    -m-3 margin: -1rem;
    -m-4 margin: -1.5rem;
    -m-5 margin: -2rem;
    -m-6 margin: -3rem;
    -m-7 margin: -4rem;
    -m-8 margin: -5rem;
    -mt-1 margin-top: -0.25rem;
    -mt-2 margin-top: -0.5rem;
    -mt-3 margin-top: -1rem;
    -mt-4 margin-top: -1.5rem;
    -mt-5 margin-top: -2rem;
    -mt-6 margin-top: -3rem;
    -mt-7 margin-top: -4rem;
    -mt-8 margin-top: -5rem;
    -mr-1 margin-right: -0.25rem;
    -mr-2 margin-right: -0.5rem;
    -mr-3 margin-right: -1rem;
    -mr-4 margin-right: -1.5rem;
    -mr-5 margin-right: -2rem;
    -mr-6 margin-right: -3rem;
    -mr-7 margin-right: -4rem;
    -mr-8 margin-right: -5rem;
    -mb-1 margin-bottom: -0.25rem;
    -mb-2 margin-bottom: -0.5rem;
    -mb-3 margin-bottom: -1rem;
    -mb-4 margin-bottom: -1.5rem;
    -mb-5 margin-bottom: -2rem;
    -mb-6 margin-bottom: -3rem;
    -mb-7 margin-bottom: -4rem;
    -mb-8 margin-bottom: -5rem;
    -ml-1 margin-left: -0.25rem;
    -ml-2 margin-left: -0.5rem;
    -ml-3 margin-left: -1rem;
    -ml-4 margin-left: -1.5rem;
    -ml-5 margin-left: -2rem;
    -ml-6 margin-left: -3rem;
    -ml-7 margin-left: -4rem;
    -ml-8 margin-left: -5rem;
    -mx-1 margin-left: -0.25rem;
    margin-right: -0.25rem;
    -mx-2 margin-left: -0.5rem;
    margin-right: -0.5rem;
    -mx-3 margin-left: -1rem;
    margin-right: -1rem;
    -mx-4 margin-left: -1.5rem;
    margin-right: -1.5rem;
    -mx-5 margin-left: -2rem;
    margin-right: -2rem;
    -mx-6 margin-left: -3rem;
    margin-right: -3rem;
    -mx-7 margin-left: -4rem;
    margin-right: -4rem;
    -mx-8 margin-left: -5rem;
    margin-right: -5rem;
    -my-1 margin-top: -0.25rem;
    margin-bottom: -0.25rem;
    -my-2 margin-top: -0.5rem;
    margin-bottom: -0.5rem;
    -my-3 margin-top: -1rem;
    margin-bottom: -1rem;
    -my-4 margin-top: -1.5rem;
    margin-bottom: -1.5rem;
    -my-5 margin-top: -2rem;
    margin-bottom: -2rem;
    -my-6 margin-top: -3rem;
    margin-bottom: -3rem;
    -my-7 margin-top: -4rem;
    margin-bottom: -4rem;
    -my-8 margin-top: -5rem;
    margin-bottom: -5rem;
    Single Side Margin

    Margin can be specified on a specific edge.

    mt-5
    mr-8
    mb-3
    ml-6
    
    <div class="card">
        <div class="flex flex-wrap align-items-center justify-content-center card-container blue-container">
            <div class="bg-blue-100 w-12rem m-3 border-round">
                <div class="mt-5 border-round-bottom bg-blue-500 text-white font-bold p-3 flex align-items-center justify-content-center">mt-5</div>
            </div>
            <div class="bg-blue-100 w-12rem m-3 border-round">
                <div class="mr-8 border-round-left bg-blue-500 text-white font-bold p-3 flex align-items-center justify-content-center">mr-8</div>
            </div>
            <div class="bg-blue-100 w-12rem m-3 border-round">
                <div class="mb-3 border-round-top bg-blue-500 text-white font-bold p-3 flex align-items-center justify-content-center">mb-3</div>
            </div>
            <div class="bg-blue-100 w-12rem m-3 border-round">
                <div class="ml-6 border-round-right bg-blue-500 text-white font-bold p-3 flex align-items-center justify-content-center">ml-6</div>
            </div>
        </div>
    </div>
    
    
    Horizontal Margin

    Same margin value can be defined at the left and right sides with shorthand classes.

    mx-6
    
    <div class="card">
        <div class="flex flex-wrap align-items-center justify-content-center card-container yellow-container">
            <div class="bg-yellow-100 w-12rem m-3 border-round">
                <div class="mx-6 border-round bg-yellow-500 text-gray-900 font-bold p-3 flex align-items-center justify-content-center">mx-6</div>
            </div>
        </div>
    </div>
    
    
    Vertical Margin

    Same margin value can also be defined at the top and bottom sides with shorthand classes.

    my-5
    
    <div class="card">
        <div class="flex flex-wrap align-items-center justify-content-center card-container green-container">
            <div class="bg-green-100 w-12rem m-3 border-round">
                <div class="my-5 border-round bg-green-500 text-white font-bold p-3 flex align-items-center justify-content-center">my-5</div>
            </div>
        </div>
    </div>
    
    
    Negative Margin

    Adding - in front of a margin class converts the value to negative.

    -mt-5
    -mr-8
    -mb-3
    -ml-6
    
    <div class="flex flex-wrap align-items-center justify-content-center card-container blue-container">
        <div class="bg-blue-100 w-12rem m-3 border-round">
            <div class="-mt-5 border-round-bottom bg-blue-500 text-white font-bold p-3 flex align-items-center justify-content-center">-mt-5</div>
        </div>
        <div class="bg-blue-100 w-12rem m-3 border-round">
            <div class="-mr-8 border-round-left bg-blue-500 text-white font-bold p-3 flex align-items-center justify-content-center">-mr-8</div>
        </div>
        <div class="bg-blue-100 w-12rem m-3 border-round">
            <div class="-mb-3 border-round-top bg-blue-500 text-white font-bold p-3 flex align-items-center justify-content-center">-mb-3</div>
        </div>
        <div class="bg-blue-100 w-12rem m-3 border-round">
            <div class="-ml-6 border-round-right bg-blue-500 text-white font-bold p-3 flex align-items-center justify-content-center">-ml-6</div>
        </div>
    </div>
    
    
    Responsive

    Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:m-3 to use a responsive class.

    • sm: small screens e.g. phones
    • md: medium screens e.g. tablets
    • lg: large screens e.g. notebooks
    • xl: larger screens e.g monitors
    my-6 and mx-0 on small screen
    
    <div class="card">
        <div class="flex flex-wrap align-items-center justify-content-center card-container purple-container">
            <div class="bg-purple-100 w-20rem m-3 border-round">
                <div class="my-6 mx-0 md:mx-6 md:my-0 border-round bg-purple-500 text-white font-bold p-3 flex align-items-center justify-content-center">my-6 and mx-0 on small screen</div>
            </div>
        </div>
    </div>