⌘ K
esc

    Padding

    Specifies the space between the content and its border.

    Classes
    Class Properties
    p-0 padding: 0;
    p-1 padding: 0.25rem;
    p-2 padding: 0.5rem;
    p-3 padding: 1rem;
    p-4 padding: 1.5rem;
    p-5 padding: 2rem;
    p-6 padding: 3rem;
    p-7 padding: 4rem;
    p-8 padding: 5rem;
    pt-0 padding-top: 0;
    pt-1 padding-top: 0.25rem;
    pt-2 padding-top: 0.5rem;
    pt-3 padding-top: 1rem;
    pt-4 padding-top: 1.5rem;
    pt-5 padding-top: 2rem;
    pt-6 padding-top: 3rem;
    pt-7 padding-top: 4rem;
    pt-8 padding-top: 5rem;
    pr-0 padding-right: 0;
    pr-1 padding-right: 0.25rem;
    pr-2 padding-right: 0.5rem;
    pr-3 padding-right: 1rem;
    pr-4 padding-right: 1.5rem;
    pr-5 padding-right: 2rem;
    pr-6 padding-right: 3rem;
    pr-7 padding-right: 4rem;
    pr-8 padding-right: 5rem;
    pb-0 padding-bottom: 0;
    pb-1 padding-bottom: 0.25rem;
    pb-2 padding-bottom: 0.5rem;
    pb-3 padding-bottom: 1rem;
    pb-4 padding-bottom: 1.5rem;
    pb-5 padding-bottom: 2rem;
    pb-6 padding-bottom: 3rem;
    pb-7 padding-bottom: 4rem;
    pb-8 padding-bottom: 5rem;
    pl-0 padding-left: 0;
    pl-1 padding-left: 0.25rem;
    pl-2 padding-left: 0.5rem;
    pl-3 padding-left: 1rem;
    pl-4 padding-left: 1.5rem;
    pl-5 padding-left: 2rem;
    pl-6 padding-left: 3rem;
    pl-7 padding-left: 4rem;
    pl-8 padding-left: 5rem;
    px-0 padding-left: 0;
    padding-right: 0;
    px-1 padding-left: 0.25rem;
    padding-right: 0.25rem;
    px-2 padding-left: 0.5rem;
    padding-right: 0.5rem;
    px-3 padding-left: 1rem;
    padding-right: 1rem;
    px-4 padding-left: 1.5rem;
    padding-right: 1.5rem;
    px-5 padding-left: 2rem;
    padding-right: 2rem;
    px-6 padding-left: 3rem;
    padding-right: 3rem;
    px-7 padding-left: 4rem;
    padding-right: 4rem;
    px-8 padding-left: 5rem;
    padding-right: 5rem;
    py-0 padding-top: 0;
    padding-bottom: 0;
    py-1 padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    py-2 padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    py-3 padding-top: 1rem;
    padding-bottom: 1rem;
    py-4 padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    py-5 padding-top: 2rem;
    padding-bottom: 2rem;
    py-6 padding-top: 3rem;
    padding-bottom: 3rem;
    py-7 padding-top: 4rem;
    padding-bottom: 4rem;
    py-8 padding-top: 5rem;
    padding-bottom: 5rem;
    Single Side Padding

    Padding can be specified on a specific edge.

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

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

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

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

    py-5
    
    <div class="card">
        <div class="flex flex-wrap align-items-center justify-content-center card-container green-container">
            <div class="py-5 bg-green-100 w-12rem m-3 border-round">
                <div class="border-round bg-green-500 text-white font-bold p-3 flex align-items-center justify-content-center">py-5</div>
            </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:p-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
    py-6 and px-0 on small screen
    
    <div class="card">
        <div class="flex flex-wrap align-items-center justify-content-center card-container purple-container">
            <div class="py-6 px-0 md:px-6 md:py-0 bg-purple-100 w-20rem m-3 border-round">
                <div class="border-round bg-purple-500 text-white font-bold p-3 flex align-items-center justify-content-center">py-6 and px-0 on small screen</div>
            </div>
        </div>
    </div>