Why formatting or minifying HTML changed how the page looks

Formatting HTML can change a page because whitespace between inline elements is not always ignored. If two buttons or images were written with no space between the tags, putting them on separate lines adds a line break, which the browser shows as a small gap. Minifying can do the opposite. Make the layout independent of whitespace with CSS.

The rule behind it

Browsers collapse any run of spaces, tabs and line breaks into a single space — but they do not remove it entirely when it sits between inline content. Text, links, spans, images and elements set to display: inline-block all flow like words in a sentence, so a space between them is drawn like the space between two words.

Compare these two pieces of markup:

• <a>One</a><a>Two</a> — the links touch.
• <a>One</a> and <a>Two</a> on separate lines — a space appears between them.

A formatter that puts each element on its own line turns the first into the second. Block elements such as div, p and list items are not affected, because whitespace between blocks is not drawn.

Where it shows up

• Navigation links or buttons styled as inline-block, suddenly a few pixels apart.
• Images in a row gaining gaps, or wrapping to a new line because the gaps add width.
• A word and an icon or a footnote marker splitting with an unwanted space.
• Inline elements inside a sentence, like <b>, gaining or losing a space next to punctuation.

Minifying: the opposite risk

A careless minifier that deletes all whitespace between tags can glue words together: “Hello <b>world</b>” becomes “Helloworld”. The HTML Formatter on this site collapses whitespace to a single space when minifying rather than removing it, and leaves the contents of pre, textarea, script and style untouched, because whitespace there is significant. When formatting, it puts elements on their own lines, so check layouts that depend on inline elements touching.

The robust fix: control spacing with CSS

• Use flexbox or grid for rows of items. In a flex or grid container, whitespace between child elements is ignored, and gap sets the exact spacing you want.
• Make images block-level when they sit in their own row or container, which also removes the small gap under images caused by text baseline alignment.
• Avoid tricks such as HTML comments between tags or font-size: 0 on the parent. They work, but break the next time someone edits or formats the file.

Once layout no longer depends on whitespace, you can format and minify freely. Format the stylesheet too with the CSS Formatter to keep it readable; it indents rules without rewriting values.

Text inside inline elements

The same rule applies within sentences. If markup reads Read the<a>guide</a>. there is no space before the link, and formatting may add one. If it reads <a>guide</a> . with a stray space before the full stop, minifying keeps that space, because it cannot know it was a mistake. Formatters preserve meaning as well as they can; spaces that were wrong in the source stay wrong. Fix them in the source.

Checking a change safely

1. Take a screenshot of the page before formatting.
2. Format the HTML and reload.
3. Compare rows of buttons, icons, images and inline text closely.
4. Fix differences with CSS rather than reverting the formatting.

Mistakes to avoid

• Formatting production templates without checking inline layouts.
• Relying on “no whitespace between tags” for spacing.
• Minifying with a tool that strips whitespace inside pre or between words.

Checklist

• Rows of inline or inline-block items laid out with flex or grid instead?
• Before and after compared visually?
• Whitespace-sensitive blocks left untouched?