How to Use HTML and CSS to Create Tabs and Spacing

A look at how white space in HTML is treated by browsers

Keyboard
Steve West/The Image Bank/Getty Images

If you are a beginning web designer, one of the many things you will have to understand early on is the way that white space in a site's code is handled by web browsers.

Unfortunately, the way that browsers handled white space is not very intuitive at first, especially if you come into HTML and compare it to how white space is handled in word processing programs, which you may be more familiar with.

 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 is not the case with HTML or with web pages. As such, learning how white space is, indeed, handled by web browsers is very important.

Spacing in Print

In word processing software, the three primary white space characters are the space, tab, and carriage return. Each of these act 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 multiple spaces down into only one space when rendered in the browser,

Why Does Someone Use Tabs?

Typically, when people use tabs in a text document, they are using them for layout reasons or to get the text to move to a certain place or to be a certain distance from another element. In web design, you cannot use those aforementioned space characters to achieve those visual styles or layout needs.

In web design, the use of extra spacing characters in the code would be purely for ease of reading that code. Web designers and developers often use tabs to indent code so that they can see which elements are children of other elements - but those indents do not affect the visual layout of the page itself. For those needed visual layout changes, you will need to turn to CSS (cascading style sheets).

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 the HTML while the style is dictated by the CSS. This means that to create spacing or achieve a certain layout, you should be turning to CSS and not trying to simply add spacing characters to the HTML code.

If you’re trying to use tabs to create columns of text, you can 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, you can 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 that aforementioned 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, you can 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 would now be indented about 5 characters.

You can also 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. Ultimately, you can 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, you can use the non-breaking space.

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

For example, if you wanted to move your word five spaces over, you could add the following before the word.

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

HTML respects these and will not collapse them down to a single space. However, this is considered a very poor practice since it is adding extra HTML markup to a document only to achieve layout needs. Referring back to that separation of structure and style, you should avoid adding non-breaking spaces simply to achieve a desired layout effect and should use CSS margins and padding instead.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 1/5/17.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "How to Use HTML and CSS to Create Tabs and Spacing." ThoughtCo, Jan. 5, 2017, thoughtco.com/html-css-tabs-spacing-3468784. Kyrnin, Jennifer. (2017, January 5). 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 September 20, 2017).