CSS margin playground

Explore margin with interactive controls for all sides, per-side, or per-axis spacing, switch units, compare physical and logical properties, and use auto to push or center the block.

Configuration

CSS output

Shorthand output groups values into CSS shorthands when possible. Individual output generates one declaration per property so each value can be reviewed or copied separately.

ShorthandIndividual

Application

Choose how values are distributed: apply one value to the whole element or adjust only the sides, axes, or groups you need.

AllIndividualAxes

Property system

Physical properties apply directly to the element's sides, while logical properties apply to the element's sides based on the text direction.

PhysicalLogical

Text direction

With logical properties, it is important to check how results change in languages written left to right and right to left.

Left to rightRight to left

Unit

CSS provides many units. Each lab lets you try the most common ones for that property.

All sides

Top

Right

Use auto

Bottom

Left

Use auto

Horizontal

Use auto

Vertical

margin

HTML

<div class="margin-demo">
  <div dir="ltr">
    margin
  </div>
</div>

Tailwind CSS

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

<div class="inline-[min(100%,28rem)] min-block-80 border border-blue-400 rounded-xl bg-gray-100">
  <div class="inline-max min-block-20 p-4 border border-dashed border-amber-500 rounded-lg bg-white m-[24px]" dir="ltr">
    margin
  </div>
</div>

CSS

.margin-demo {
  inline-size: min(100%, 28rem);
  min-block-size: 20rem;
  border: 1px solid #60a5fa;
  border-radius: 0.75rem;
  background-color: #f3f4f6;
}

.margin-demo > div {
  inline-size: max-content;
  min-block-size: 5rem;
  padding: 1rem;
  border: 1px dashed #f59e0b;
  border-radius: 0.5rem;
  background-color: #ffffff;
  margin: 24px;
}

.margin-demo {
  inline-size: min(100%, 28rem);
  min-block-size: 20rem;
  border: 1px solid #60a5fa;
  border-radius: 0.75rem;
  background-color: #f3f4f6;

  > div {
    inline-size: max-content;
    min-block-size: 5rem;
    padding: 1rem;
    border: 1px dashed #f59e0b;
    border-radius: 0.5rem;
    background-color: #ffffff;
    margin: 24px;
  }
}