CSS margin-bottom Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">.wrapper {
    max-width: 480px;
    margin: 40px auto;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

h2 {
    margin: 0 0 16px 0;
    font-size: 18px;
}

.card {
    background: #f3f4f6;
    padding: 16px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}

.with-margin {
    margin-bottom: 24px;
}
</style></head><body><div class="wrapper">
    <h2>CSS margin-bottom example</h2>
    <div class="card with-margin">This box has margin-bottom: 24px;</div>
    <div class="card">This sibling box sits below the first one.</div>
</div></body></html>