Adjust margin, border, padding, and content dimensions in real time. The diagram updates instantly — just like Chrome DevTools — and the ready-to-copy CSS output updates alongside it.

Settings

<!-- Presets -->
<div>
  <div class="bm-section-header">
    <span class="bm-section-label" style="background:#e8eaff;color:#3a3a6e;">Presets</span>
  </div>
  <div class="bm-presets">
    <button class="bm-preset-btn active" onclick="bmApplyPreset('card',this)">Card</button>
    <button class="bm-preset-btn" onclick="bmApplyPreset('button',this)">Button</button>
    <button class="bm-preset-btn" onclick="bmApplyPreset('input',this)">Input</button>
    <button class="bm-preset-btn" onclick="bmApplyPreset('container',this)">Container</button>
    <button class="bm-preset-btn" onclick="bmApplyPreset('reset',this)">Reset</button>
  </div>
</div>

<!-- Box-sizing -->
<div>
  <div class="bm-section-header">
    <span class="bm-section-label" style="background:#e8eaff;color:#3a3a6e;">box-sizing</span>
  </div>
  <div class="bm-sizing-toggle">
    <label><input type="radio" name="bm-sizing" value="content-box" onchange="bmUpdate()"> content-box</label>
    <label><input type="radio" name="bm-sizing" value="border-box" onchange="bmUpdate()" checked> border-box</label>
  </div>
</div>

<!-- Content -->
<div>
  <div class="bm-section-header">
    <span class="bm-section-label bm-label-content">Content</span>
  </div>
  <div class="bm-four-grid">
    <label>Width<input type="number" id="bm-cw" value="200" min="20" max="800" oninput="bmUpdate()"></label>
    <label>Height<input type="number" id="bm-ch" value="100" min="20" max="800" oninput="bmUpdate()"></label>
  </div>
</div>

<!-- Padding -->
<div>
  <div class="bm-section-header">
    <span class="bm-section-label bm-label-padding">Padding</span>
    <label class="bm-link-toggle"><input type="checkbox" id="bm-link-padding" checked onchange="bmLinkChanged('padding')"> Link sides</label>
  </div>
  <div class="bm-four-grid">
    <label>Top<input type="number" id="bm-pt" value="16" min="0" max="200" oninput="bmSideInput('padding','t')"></label>
    <label>Right<input type="number" id="bm-pr" value="16" min="0" max="200" oninput="bmSideInput('padding','r')"></label>
    <label>Bottom<input type="number" id="bm-pb" value="16" min="0" max="200" oninput="bmSideInput('padding','b')"></label>
    <label>Left<input type="number" id="bm-pl" value="16" min="0" max="200" oninput="bmSideInput('padding','l')"></label>
  </div>
</div>

<!-- Border -->
<div>
  <div class="bm-section-header">
    <span class="bm-section-label bm-label-border">Border</span>
    <label class="bm-link-toggle"><input type="checkbox" id="bm-link-border" checked onchange="bmLinkChanged('border')"> Link sides</label>
  </div>
  <div class="bm-four-grid">
    <label>Top<input type="number" id="bm-bt" value="1" min="0" max="50" oninput="bmSideInput('border','t')"></label>
    <label>Right<input type="number" id="bm-br" value="1" min="0" max="50" oninput="bmSideInput('border','r')"></label>
    <label>Bottom<input type="number" id="bm-bb" value="1" min="0" max="50" oninput="bmSideInput('border','b')"></label>
    <label>Left<input type="number" id="bm-bl" value="1" min="0" max="50" oninput="bmSideInput('border','l')"></label>
  </div>
  <div class="bm-border-style-row">
    <label>Border style</label>
    <select id="bm-bstyle" onchange="bmUpdate()">
      <option value="solid" selected>solid</option>
      <option value="dashed">dashed</option>
      <option value="dotted">dotted</option>
      <option value="double">double</option>
      <option value="groove">groove</option>
      <option value="none">none</option>
    </select>
  </div>
</div>

<!-- Margin -->
<div>
  <div class="bm-section-header">
    <span class="bm-section-label bm-label-margin">Margin</span>
    <label class="bm-link-toggle"><input type="checkbox" id="bm-link-margin" checked onchange="bmLinkChanged('margin')"> Link sides</label>
  </div>
  <div class="bm-four-grid">
    <label>Top<input type="number" id="bm-mt" value="16" min="0" max="200" oninput="bmSideInput('margin','t')"></label>
    <label>Right<input type="number" id="bm-mr" value="16" min="0" max="200" oninput="bmSideInput('margin','r')"></label>
    <label>Bottom<input type="number" id="bm-mb" value="16" min="0" max="200" oninput="bmSideInput('margin','b')"></label>
    <label>Left<input type="number" id="bm-ml" value="16" min="0" max="200" oninput="bmSideInput('margin','l')"></label>
  </div>
</div>

Box Model Diagram

margin
border
padding
200 × 100 content
<!-- Computed size -->
<div class="bm-totals">
  <div class="bm-total-box">
    <div class="bm-total-val" id="bm-total-w">—</div>
    <div class="bm-total-lbl">Total width (px)</div>
  </div>
  <div class="bm-total-box">
    <div class="bm-total-val" id="bm-total-h">—</div>
    <div class="bm-total-lbl">Total height (px)</div>
  </div>
</div>

Generated CSS

How to Use

  1. Choose a preset — Card, Button, Input, or Container loads sensible defaults instantly.
  2. Adjust values — Each area (margin, border, padding, content) has independent top/right/bottom/left fields. Enable Link sides to keep all four sides equal.
  3. Toggle box-sizing — Switch between content-box and border-box to see how the computed total changes.
  4. Read the diagram — Colors match Chrome DevTools: orange = margin, yellow = border, green = padding, blue = content.
  5. Copy CSS — Hit Copy CSS and paste directly into your stylesheet.

Understanding the CSS Box Model

Every HTML element is a rectangular box made of four concentric layers:

LayerColorDescription
ContentBlueWhere text and child elements live. Set by width / height.
PaddingGreenSpace between content and border. Background color fills this area.
BorderYellowThe visible edge of the element. Can have width, style, and color.
MarginOrangeInvisible space outside the border. Separates elements from each other.

content-box vs border-box

With content-box (the CSS default) width refers to the content area only — padding and border are added on top. With border-box width includes content, padding, and border, making layouts far more predictable. Most modern projects use box-sizing: border-box globally.

*, *::before, *::after {
  box-sizing: border-box;
}

Margin shorthand reference

SyntaxMeaning
margin: 16pxAll four sides = 16 px
margin: 8px 16pxTop/Bottom = 8 px, Left/Right = 16 px
margin: 8px 16px 24pxTop = 8, Left/Right = 16, Bottom = 24
margin: 8px 12px 16px 20pxTop / Right / Bottom / Left