How to Use HTML and CSS to Create Tabs and Spacing

Browsers collapse HTML line breaks, so use CSS to space things properly

HTML question mark

 Getty Images

The way that browsers handled white space is not very intuitive at first, especially if you compare how Hypertext Markup Language handles white space relative to word processing programs. In word processing software, you can add lots of spacing or tabs in the document and that spacing will be reflected in the display of the document's content. This WYSIWYG design is not the case with HTML or with web pages.

Spacing in Print

In word processing software, the three primary whitespace characters are the space, tab, and carriage return. Each of these characters acts in a distinct way, but in HTML, browsers render them all essentially the same. Whether you place one space or 100 spaces in your HTML markup or mix your spacing up with tabs and carriage returns, all of these will be condensed down to one space when the page is rendered by the browser. In web design terminology, this is known as white space collapse. You cannot use these typical spacing keys to add whitespace in a web page because the browser collapses repeated spaces into only one space when rendered in the browser,

Using CSS to Create HTML Tabs and Spacing

Websites today are built with a separation of structure and style. The structure of a page is handled by HTML while the style is dictated by Cascading Style Sheets. To create spacing or achieve a certain layout, turn to CSS instead of adding spacing characters to the HTML code.

If you’re trying to use tabs to create columns of text, instead use <div> elements that are positioned with CSS to get that column layout. This positioning could be done through CSS floats, absolute and relative positioning, or newer CSS layout techniques like Flexbox or CSS Grid.

If the data you are laying out is tabular data, use tables to align that data as you'd like. Tables often get a bad rap in web design because they were abused as pure layout tools for so many years, but tables are still perfectly valid if your content contains genuinely tabular data.

Margins, Padding, and Text-Indent

The most common ways to create spacing with CSS is by using one of the following CSS styles:

For example, indent the first line of a paragraph like a tab with the following CSS (note that this assumes your paragraph has a class attribute of "first" attached to it):

p.first {
text-indent: 5em;
}

This paragraph indents about five characters.

Use the margin or padding properties in CSS to add spacing to the top, bottom, left, or right (or combinations of those sides) of an element. Achieve any kind of spacing needed by turning to CSS.

Moving Text More than One Space Without CSS

If all you want is for your text to be moved more than one space away from the preceding item, use the non-breaking space.

To use the non-breaking space, you add &nbsp; as many times as you need it in your HTML markup.

HTML respects these non-breaking spaces and will not collapse them to a single space. However, this approach is considered a poor practice since it is adding extra HTML markup to a document only to achieve layout needs. When practicable, avoid adding non-breaking spaces simply to achieve the desired layout effect and use CSS margins and padding instead.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "How to Use HTML and CSS to Create Tabs and Spacing." ThoughtCo, Sep. 30, 2021, thoughtco.com/html-css-tabs-spacing-3468784. Kyrnin, Jennifer. (2021, September 30). How to Use HTML and CSS to Create Tabs and Spacing. Retrieved from https://www.thoughtco.com/html-css-tabs-spacing-3468784 Kyrnin, Jennifer. "How to Use HTML and CSS to Create Tabs and Spacing." ThoughtCo. https://www.thoughtco.com/html-css-tabs-spacing-3468784 (accessed March 28, 2024).