Spacer

Intentional empty space used for layout.

html

<div class="spacer-demo spacer-demo--vertical">
  <div class="spacer-demo__block">Block A</div>
  <div class="spacer-demo__gap spacer-demo__gap--guide" style="--size:32px;--accent:#E8A020;"><span class="spacer-demo__label" style="color:#E8A020;">32px</span></div>
  <div class="spacer-demo__block">Block B</div>
</div>
<style>
.spacer-demo { display: flex; font: 12px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; align-items: center; }
.spacer-demo--vertical { flex-direction: column; align-items: stretch; }
.spacer-demo__block { background: #fff; border: 1px solid #24143022; border-radius: 6px; padding: 14px; text-align: center; }
.spacer-demo--horizontal .spacer-demo__block { flex: none; }
.spacer-demo__gap { position: relative; }
.spacer-demo--vertical .spacer-demo__gap { height: var(--size); }
.spacer-demo--horizontal .spacer-demo__gap { width: var(--size); flex: none; }
.spacer-demo__gap--guide { outline: 1px dashed var(--accent); }
.spacer-demo__label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #FAF7F2; padding: 0 4px; font-weight: 700; white-space: nowrap; }
</style>

tailwind

<div class="flex items-center font-sans text-xs text-[#241430] bg-[#FAF7F2] p-4 spacer-tw spacer-tw--vertical">
  <div class="bg-white border border-[#24143022] rounded-md p-3.5 text-center spacer-tw__block">Block A</div>
  <div class="relative spacer-tw__gap spacer-tw__gap--guide" style="--size:32px;--accent:#E8A020;"><span class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-[#FAF7F2] px-1 font-bold whitespace-nowrap" style="color:#E8A020;">32px</span></div>
  <div class="bg-white border border-[#24143022] rounded-md p-3.5 text-center spacer-tw__block">Block B</div>
</div>
<style>
.spacer-tw--vertical { flex-direction: column; align-items: stretch; }
.spacer-tw--vertical .spacer-tw__gap { height: var(--size); }
.spacer-tw--horizontal .spacer-tw__gap { width: var(--size); flex: none; }
.spacer-tw--horizontal .spacer-tw__block { flex: none; }
.spacer-tw__gap--guide { outline: 1px dashed var(--accent); }
</style>

react

export function Spacer({
  size = 32,
  axis = "vertical",
  accent = "#E8A020",
  guide = true,
}) {
  const vertical = axis === "vertical";
  return (
    <div style={{ display: "flex", flexDirection: vertical ? "column" : "row", alignItems: vertical ? "stretch" : "center", fontFamily: "system-ui, sans-serif", fontSize: 12, color: "#241430", background: "#FAF7F2", padding: 16 }}>
      <div style={{ background: "#fff", border: "1px solid #24143022", borderRadius: 6, padding: 14, textAlign: "center", flex: vertical ? undefined : "none" }}>Block A</div>
      <div style={{ position: "relative", height: vertical ? size : "auto", width: vertical ? "auto" : size, flex: vertical ? undefined : "none", outline: guide ? `1px dashed ${accent}` : "none" }}>
        {guide && <span style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", background: "#FAF7F2", padding: "0 4px", fontWeight: 700, whiteSpace: "nowrap", color: accent }}>{size}px</span>}
      </div>
      <div style={{ background: "#fff", border: "1px solid #24143022", borderRadius: 6, padding: 14, textAlign: "center", flex: vertical ? undefined : "none" }}>Block B</div>
    </div>
  );
}