HTML Formatting: Whitespace and Inline-block Spacing

1. Problem

Formatting may change whitespace text that participates in inline layout. This guide compares two-button spacing through DOM text, computed CSS, and geometry. Tag names alone do not determine display.

2. Minimal reproduction

Save this fragment as HTML and open it in a browser. The first row has one ASCII space between buttons, the second has none, and the third uses an explicit Flexbox gap. Measure the output rather than inferring pixels from source length.

<style>
  .inline button { display: inline-block; margin: 0; font: inherit; }
  .row { font: 16px Arial; white-space: normal; }
  .flex { display: flex; gap: 8px; }
</style>
<div id="with-space" class="row inline"><button>A</button> <button>B</button></div>
<div id="without-space" class="row inline"><button>A</button><button>B</button></div>
<div id="with-gap" class="row flex"><button>A</button> <button>B</button></div>

3. Root cause

CSS Text rules and properties such as white-space govern whitespace processing. Between inline-block boxes, a text space commonly contributes a font-dependent width; 4px is not a universal default. Font, size, layout, language, and surrounding context matter. A source newline does not universally become a space.

4. Recommendation

Use Flexbox/Grid gap for button-group layout while retaining meaningful spaces in inline prose. Decide whether whitespace can change only with the relevant CSS and layout context. Try /tools/format/html-formatter and compare its output on the target page.

5. Complete code

Run the transpiled TypeScript below in the reproduction page console, or remove its parameter type first. It reads styles and positions; it is a diagnostic, not a minifier. The rectangle difference measures this example’s gap only for horizontal, same-line boxes without transforms.

function inspectRow(root: HTMLElement) {
  const buttons = root.querySelectorAll('button');
  if (buttons.length !== 2) throw new Error('Expected two buttons');
  const first = buttons[0].getBoundingClientRect();
  const second = buttons[1].getBoundingClientRect();
  return {
    text: root.textContent,
    display: getComputedStyle(root).display,
    whiteSpace: getComputedStyle(root).whiteSpace,
    gapPx: second.left - first.right,
  };
}

for (const id of ['with-space', 'without-space', 'with-gap']) {
  const root = document.getElementById(id);
  if (!(root instanceof HTMLElement)) throw new Error(`Missing ${id}`);
  console.log(id, inspectRow(root));
}

6. Incorrect approaches

A div/span whitelist misses CSS display overrides. A fixed 4px assumption misses font metrics. Deleting all inter-tag text can join words. A legacy font-size: 0 workaround requires restoring descendant font sizes and checking text.

7. Boundaries

pre, pre-wrap, and break-spaces preserve additional whitespace. Protect pre/textarea content separately. Hidden elements, wrapping, RTL, vertical writing, transforms, margins, and responsive CSS change what geometry means. Flex/Grid whitespace is not ordinary inline spacing.

8. Verification

Expect a font-dependent gap in row one, approximately zero in row two, and an 8px gap in row three under the supplied styles. Change the font size and measure again. Override a div to inline-block to show why tag names are insufficient. Compare both text and rendering.

9. FAQ

Should each tag start on a new line? No; inserted whitespace can affect inline text.

Why is the gap not always 4px? Space glyph width depends on font and size.

Does gap protect preformatted text? No; layout spacing and literal text preservation are separate concerns.

10. Summary

Locate whitespace nodes, inspect actual styles, and compare the target viewport. Use explicit gap for button groups and preserve meaningful inline spaces. See /articles/html-formatter-script-style-indentation-engine for embedded code and /articles/html-formatter-seo-semantic-cleanliness for structure checks.