CSS padding Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">    body {
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
        padding: 24px;
        background: #fafafa;
    }

    .container {
        max-width: 720px;
        margin: 0 auto;
    }

    .box {
        padding: 20px;
        border: 2px solid #333;
        background: #f0f8ff;
        margin-bottom: 16px;
    }

    .box-shorthand {
        padding: 10px 20px; /* vertical | horizontal */
        border: 2px dashed #2b8a78;
        background: #fff8e1;
        margin-bottom: 16px;
    }

    .box-individual {
        padding-top: 8px;
        padding-right: 24px;
        padding-bottom: 32px;
        padding-left: 40px;
        border: 2px dotted #c34a4a;
        background: #f2fff2;
    }
</style></head><body><div class="container">
        <h2>CSS Padding Examples</h2>

        <div class="box">Box with padding: 20px</div>

        <div class="box-shorthand">Shorthand padding: 10px 20px</div>

        <div class="box-individual">Individual paddings: top 8px / right 24px / bottom 32px / left 40px</div>
    </div></body></html>