Box Model

Content, padding, border and margin model.

html

<div class="bm-wrap" role="img" aria-label="Box model diagram: margin layer in sky blue, border in gold, padding in blush, content in mint">
  <div class="bm-margin" style="padding:20px;">
    <span class="bm-tag">margin 20px</span>
    <div class="bm-border" style="padding:4px;">
      <span class="bm-tag">border 4px</span>
      <div class="bm-padding" style="padding:16px;">
        <span class="bm-tag">padding 16px</span>
        <div class="bm-content" style="width:100px;height:100px;box-sizing:content-box;">content</div>
      </div>
    </div>
  </div>
  <p class="bm-caption">padding 16px &middot; border 4px &middot; margin 20px &middot; box-sizing: content-box &middot; content 100px square</p>
</div>
<style>
.bm-wrap { font: 14px/1.4 system-ui, sans-serif; color: #241430; width: 320px; }
.bm-margin { position: relative; background: #BFD9F2; }
.bm-border { position: relative; background: #E8A020; }
.bm-padding { position: relative; background: #F5C2E0; }
.bm-content { position: relative; background: #A8E6C1; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.bm-tag { position: absolute; top: 2px; left: 4px; font-size: 10px; font-weight: 600; color: #241430; text-transform: uppercase; letter-spacing: .03em; }
.bm-caption { margin: 12px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="font-sans text-[#241430] w-[320px]" role="img" aria-label="Box model diagram: margin layer in sky blue, border in gold, padding in blush, content in mint">
  <div class="relative bg-[#BFD9F2]" style="padding:20px">
    <span class="absolute top-0.5 left-1 text-[10px] font-semibold uppercase tracking-wide">margin 20px</span>
    <div class="relative bg-[#E8A020]" style="padding:4px">
      <span class="absolute top-0.5 left-1 text-[10px] font-semibold uppercase tracking-wide">border 4px</span>
      <div class="relative bg-[#F5C2E0]" style="padding:16px">
        <span class="absolute top-0.5 left-1 text-[10px] font-semibold uppercase tracking-wide">padding 16px</span>
        <div class="relative bg-[#A8E6C1] flex items-center justify-center font-bold" style="width:100px;height:100px;box-sizing:content-box">content</div>
      </div>
    </div>
  </div>
  <p class="mt-3 text-xs text-[#241430]/80">padding 16px &middot; border 4px &middot; margin 20px &middot; box-sizing: content-box &middot; content 100px square</p>
</div>

react

export function BoxModel({
  padding = 16,
  border = 4,
  margin = 20,
  boxSizing = "content-box",
  boxSize = 100,
}) {
  const tag = { position: "absolute", top: 2, left: 4, fontSize: 10, fontWeight: 600, textTransform: "uppercase", letterSpacing: ".03em" };
  return (
    <div style={{ font: "14px/1.4 system-ui, sans-serif", color: "#241430", width: 320 }} role="img"
      aria-label="Box model diagram: margin layer in sky blue, border in gold, padding in blush, content in mint">
      <div style={{ position: "relative", background: "#BFD9F2", padding: margin }}>
        <span style={tag}>margin {margin}px</span>
        <div style={{ position: "relative", background: "#E8A020", padding: border }}>
          <span style={tag}>border {border}px</span>
          <div style={{ position: "relative", background: "#F5C2E0", padding: padding }}>
            <span style={tag}>padding {padding}px</span>
            <div style={{ position: "relative", background: "#A8E6C1", display: "flex", alignItems: "center",
              justifyContent: "center", fontWeight: 700, width: boxSize, height: boxSize, boxSizing }}>
              content
            </div>
          </div>
        </div>
      </div>
      <p style={{ marginTop: 12, fontSize: 12, color: "#241430cc" }}>
        padding {padding}px &middot; border {border}px &middot; margin {margin}px &middot; box-sizing: {boxSizing} &middot; content {boxSize}px square
      </p>
    </div>
  );
}