CSS margin-inline Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Styles for margin-inline demonstration */
:root {
  --bg: #f8fafc;
  --panel: #f1f5f9;
  --accent: #2563eb;
  --text: #0f172a;
}
* {
  box-sizing: border-box;
}
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: var(--bg);
  color: var(--text);
  margin: 2rem;
}
.wrapper {
  max-width: 820px;
  margin-inline: auto;
  display: grid;
  gap: 1.25rem;
}
.example {
  background: var(--panel);
  padding: 1rem;
  border-radius: 8px;
}
.container {
  background: #fff;
  padding: 1rem;
  margin-top: 0.75rem;
}
.box {
  background: var(--accent);
  color: #fff;
  padding: 1rem;
  border-radius: 6px;
  /* margin-inline sets both inline-start and inline-end margins.
     In LTR this is left/right; in RTL it follows the inline axis and flips. */
  margin-inline: 2rem;
}
/* Flip writing direction to demonstrate that margin-inline follows the inline axis */
.example.rtl .container {
  direction: rtl;
}
</style></head><body><div class='wrapper'>
  <h1>CSS margin-inline demo</h1>

  <section class='example ltr'>
    <h2>LTR (default)</h2>
    <div class='container'>
      <div class='box'>Box with margin-inline: 2rem;</div>
    </div>
  </section>

  <section class='example rtl'>
    <h2>RTL (direction: rtl)</h2>
    <div class='container'>
      <div class='box'>Box with margin-inline: 2rem;</div>
    </div>
  </section>
</div></body></html>