In design, whitespace is the empty spaces around the elements in the design. It is used to visually separate elements and group them together. Before CSS was widely supported, there were very few ways to manipulate the whitespace in a Web design. But CSS provides a huge number of tools. This article discusses CSS properties that manipulate the whitespace in and around textual elements on a Web page.
Indenting and Outdenting Text
With CSS you can indent or outdent text easily. The text-indent property allows you to indent/outdent your text by a specific length or a percentage of the parent element's width.
The default indenting is 0, if you want to indent your text, you would add a positive length or percentage. If you wanted to outdent your text, you would add a negative length or percentage. For example:
blockquote { text-indent: 1em; }
li { text-indent: -1em; }
Change the Tracking
Tracking is the space between letters. In layout it is very common to adjust the tracking of text to make it fit better in a space, change the tone, or affect the style of the layout. And with the CSS letter-spacing property you can adjust the spacing between the letters quickly and easily. And with the CSS word-spacing property you can adjust the space between the words. Both of these properties help you affect the tracking of the lines on your Web page.
Note: you can also use the letter-spacing property to approximate kerning in your Web page text. But this is not precisely the same thing. Kerning adjusts the letter spacing to create glyphs that look like ligatures and is usually defined by the font family.
- View standard letter spacing
- View standard word spacing
- View changing the letter spacing in the middle of a paragraph
- View changing the word spacing in the middle of a paragraph
- View making the letter spacing smaller
- View making the word spacing smaller
- View an example of kerning
Adjust the Space Between Lines
The CSS shorthand property font allows you to adjust the line height or leading of your text. But you can also adjust the leading with the line-height property alone.
Changing the leading or line height affects the tone of the text as well as the readability. Leading is typically measured from the baseline of the top line to the baseline of the next line down. And a good rule of thumb is to add 20% to your font size to create your leading or line height.
For example, if your paragraph font is 1em in height, then a good leading or line height would be 1.2em.
There is Even a White-Space Property
The white-space property in CSS allows you to define exactly how the browser interprets white space characters in the code. In standard HTML code user agents collapse whitespace characters down to just one. So, 10 carriage returns in a row in the HTML code will look the same in the browser as one space.
The white-space property allows you to define the enclosed text as:
- pre - the whitespace characters are treated as separate entities. The text is displayed the same way it would be inside the <pre> tag.
- nowrap - normally, user agents will wrap text at either the width of the elements or the screen. With nowrap, you tell the browsers to only wrap to the next line when a <br/> element is found.
- pre-wrap - whitespace characters are not collapsed, but the text wraps as it normally would.
- pre-line - whitespace characters are collapsed as normal, but the text doesn't wrap until a <br/> tag is found.
The options pre-wrap and pre-line were added in CSS 2 and are not widely supported.
