Margin

Space outside an element.

html

<div class="mg-wrap" role="img" aria-label="A box pushed away from its container edges by margin on each side, shown in sky blue">
  <div class="mg-container">
    <div class="mg-box" style="margin:12px 12px 12px 12px;">content</div>
  </div>
  <p class="mg-caption">margin: 12px 12px 12px 12px (top right bottom left)</p>
</div>
<style>
.mg-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 300px; }
.mg-container { background: #BFD9F2; border-radius: 8px; padding: 2px; }
.mg-box { background: #A8E6C1; border-radius: 6px; padding: 14px; font-weight: 700; text-align: center; box-sizing: border-box; }
.mg-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="font-sans text-[#241430] w-[300px]" role="img" aria-label="A box pushed away from its container edges by margin on each side, shown in sky blue">
  <div class="bg-[#BFD9F2] rounded-lg p-0.5">
    <div class="bg-[#A8E6C1] rounded-md p-3.5 font-bold text-center box-border" style="margin:12px 12px 12px 12px;">content</div>
  </div>
  <p class="mt-2.5 text-xs text-[#241430]/80">margin: 12px 12px 12px 12px (top right bottom left)</p>
</div>

react

export function Margin({
  top = 12,
  right = 12,
  bottom = 12,
  left = 12,
}) {
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", width: 300 }}
      role="img" aria-label="A box pushed away from its container edges by margin on each side, shown in sky blue">
      <div style={{ background: "#BFD9F2", borderRadius: 8, padding: 2 }}>
        <div style={{ background: "#A8E6C1", borderRadius: 6, padding: 14, fontWeight: 700, textAlign: "center", boxSizing: "border-box",
          margin: `${top}px ${right}px ${bottom}px ${left}px` }}>
          content
        </div>
      </div>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430cc" }}>margin: {top}px {right}px {bottom}px {left}px (top right bottom left)</p>
    </div>
  );
}