Explain Codes LogoExplain Codes Logo

Tab Character Instead of Multiple Non-Breaking Spaces ("nbsp")?

html
responsive-design
css-best-practices
html-entities
Alex KataevbyAlex Kataev·Mar 8, 2025
TLDR

Preserve spaces and tabs in your HTML using CSS white-space: pre; along with the ASCII tab character 	, as an alternative to chains of  .

<style> .tabbed { white-space: pre; } </style> <div class="tabbed">&#9;Let the tabs do the job.</div>

Efficient control with CSS

Generally, CSS should be your magic wand for managing text space. CSS offers methods such as padding-left or margin-left with relative units like em providing scalable and efficient solutions.

CSS classes for indentation

Use custom CSS classes for different levels of indentation. This allows for precise control of your text structure, offering an efficient and easily maintainable solution.

Thin and en spaces

The HTML entities &thinsp; and &ensp; are useful for tuning space width. Mastering these entities can give you extra precision in spacing, but ensure your charset is universally compatible.

<span>Thin space:&thinsp;| and en space:&ensp;|</span>

Embracing the tab character

While the entity &emsp; is a traditional equivalent to the 4-space tab character, remember that this representation can be inconsistent across different browsers as W3C does not specify tab stops.

Break free with zero-width spaces

Once in a while, you might need an invisible placeholder in your text. That’s when zero-width spaces come in handy, controlling line breaks seamlessly in your HTML.

<span>breaking&ZeroWidthSpace;words</span> <!-- Breaks words like heartbreak...oops -->

Precision and control with CSS

With CSS properties like tab-size, margin, and padding, you can simulate tab stops and achieve perfect alignment based on your design needs. CSS provides unmatched precision and control for spacing and offers customization that is as limitless as your creativity.

.tab { tab-size: 4; /* Can you TAB it?! */ }

Pragmatic tabbing

Too much of one thing is never good, and the same is true for your HTML. Excessive use of &nbsp; is as tedious for you as the person who must maintain your code. Settle for a CSS-first approach for a more pragmatic and maintainable solution.