If you’re a beginning web designer, one of the many things you’ll need to understand early on is how white space in a site’s code is handled by web browsers.
Unfortunately, the way browsers handle white space isn’t very intuitive at first, especially when you go into HTML and compare it to the way white space is handled in word processing programs, with that you may be more familiar with. In word processing software, you can add many spaces or tabs in the document and that space will be reflected in the display of the document content. This is not the case with HTML or web pages. As such, it is very important to learn how white space is handled by web browsers.
Blank space in print
In word processing software, the three main whitespace characters are the space, tab, and carriage return. Each of these acts in a different way, but in HTML, browsers do them all essentially the same. Whether you put a space or 100 spaces in your HTML markup or mix your spacing with tabs and carriage returns, all of this will be condensed to a space when the browser renders the page. In web design terminology, this is known as collapsing white space. You can’t use these typical space keys to add white space in a web page because the browser collapses multiple spaces into a single space when they are rendered in the browser,
Why are tabs used?
Typically, when people use tabs in a text document, they use them for design reasons or to make the text move to a certain place or to be a certain distance from another element. In web design, the space characters mentioned above cannot be used to achieve those visual styles or design needs. In web design, the use of extra spacing characters in code would be purely to make that code easier to read. Web designers and developers often use tabs to indent code so they can see which elements are children of other elements, but those indents don’t affect the visual layout of the page itself. For those necessary visual design changes, you will have to resort to CSS (Cascading Style Sheets).
Using CSS to create HTML tabs and spaces
Websites today are built with a separation of structure and style. The structure of a page is handled by the HTML while the styling is dictated by the CSS. This means that to create spaces or achieve a certain layout, you must use CSS and not try 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 elements that are positioned with CSS to get that column layout. This positioning can be done using CSS floats, absolute and relative positioning, or newer CSS layout techniques like Flexbox or CSS Grid.
If the data you are presenting is tabular data, you can use tables to line it up however you like. Tables often get a bad rap in web design because they’ve been abused as pure design tools for many years, but tables are still perfectly fine if their content contains the aforementioned tabular data.
Margins, padding and Text-Indent
The most common way to create spaces with CSS is by using one of the following CSS styles:
- margin
- padded
- text indentation
For example, you can indent the first line of a paragraph as a tab with the following CSS (note that this assumes your paragraph has a “first” class attribute attached to it):
p.first {
text indent: 5em;
}
This paragraph would now have about five characters indented.
You can also use the margin or padding properties in CSS to add space to the top, bottom, left, or right (or combinations of those sides) of an element. Ultimately, whatever type of spacing is needed can be achieved by resorting to CSS.
Move text more than one space without CSS
If all you want is for your text to be more than one space away from the previous element, you can use non-breaking space.
To use the non-breakable space, simply add
as many times as you need in your HTML layout.
For example, if you want to move your word up five spaces, you can add the following before the word.
.
HTML respects them and does not compress them into a single space. However, this is considered very poor practice as you are adding extra HTML markup to a document just to satisfy layout needs. Referring back to that separation of structure and style, you should avoid adding non-breaking spaces simply to achieve the desired layout effect and should use CSS padding and margins instead.