Ignore whitespace in HTML

html

css-properties

whitespace-management

layout-control

byAnton Shumikhin·Sep 16, 2024

Trim HTML whitespace using the CSS property white-space: nowrap;. It prevents line wraps and discards additional spaces:

<style>
  .compact { white-space: nowrap; }
</style>
<div class="compact">No extra spaces here.</div>

To put simply, text is displayed compactly, bypassing surplus HTML spacing.

Filling gaps: The CSS method

Modern CSS techniques offer numerous tools for managing whitespace:

CSS properties display: flex; and display: grid; provide advanced control over layout and element spacing, often removing the necessity for whitespace hacking.

.flex-container {
  display: flex; /* Makes the browser treat items like flexible boxes */
}

Applying a font-size of 0 to your container can remove space between inline-block elements. However, the font-size for child elements should be reset to the desired size.

.container {
  font-size: 0; /* Removes extra space */
}
.container > .child {
  font-size: 16px; /* Reset to original or preferred font-size */
}

Ensure images are set to display: block; or write image tags without spaces or line breaks to prevent unexpected whitespace.

Advanced CSS: Tips and tricks

Collapse text with CSS

For precision while dealing with text, take advantage of the white-space property:

.compact-text {
  white-space: pre-line; /* Collapses multiple spaces, but newlines hold their ground */
}

This property retains new lines while collapsing multiple spaces into one.

Tackle inline-block nuances

Bear in mind that inline-block elements behave similarly to text. Spaces written in the HTML can present unexpected gaps. To bypass them, you can:

Delete spaces and line breaks in between the markup.
Input HTML comments to alleviate gaps.

<div class="inline-block"><!--
--><div>We're all floating</div><!--
--><div>In space</div><!--
--><div>With cats</div>
</div>

Cutting-edge tidbits

The future: white-space-collapse

Although no browsers have implemented it yet, keep an eye out for white-space-collapse: discard; it could be the next big thing in whitespace management. Stay updated with the latest browser releases using resources like caniuse.com.

Developer tools and layout troubleshooting

Developer tools provided by browsers form a crucial part of the process. Tools such as inspect element can be used to identify and modify spacing issues in real-time.

Inspect Element -> Tweak CSS -> Review Changes Live

Flex and grid: Layout essentials

Flex: Bend it like you mean it

Transforming your layout with display: flex; has numerous benefits:

The align-items and justify-content properties give you extra space controls, independent of whitespace.
When you implement flex-wrap: wrap;, items line up perfectly without an extra space.