In web designing, the term ‘whitespace’ is more often used. The beginners of web design must be eager to know more about this term. There are a lot of empty spaces around various elements of a web page. These empty spaces are known as whitespace. It is used to separate dissimilar elements and group all similar elements together. So it helps in nice visual arrangement of elements. Before the introduction of CSS, there were few methods that deal with the whitespace in a web page. But in CSS, the tools for controlling these empty spaces are aplenty. These CSS properties are discussed below elaborately.

The indenting and outdenting of text is easier with CSS. The text-indent property performs this task by allowing you to indent or outdent your text by a definite length or a certain percentage of the parent element’s width. The default value of indenting is zero. You can only specify a positive value (length or percentage) for your indenting. On the other hand, a negative length or percentage is specified in case of outdenting. For instance:

blockquote { text-indent: 1em; }
li { text-indent: -1em; }

There is also space between letters. This is known as tracking. It is a well-known practice to amend the tracking of text so that it fits well in a space. You can also alter the tone or modify the layout style. CSS makes the task of adjusting the space between letters easy by its letter-spacing property. Similarly, by using word-spacing property you can adjust the space between words. So the above two properties enable the designers to control the tracking of the lines on a web page.

The letter-spacing property is also used to affect the estimated kerning in your text. Kerning is somewhat different from tracking. It modifies the spacing between letters to make glyphs that have an appearance of ligatures. Kerning is generally defined by the font family.

You can use CSS shorthand property to adjust the space between lines. This property enables you to alter the line height or leading of your text. The line-height property alone is sufficient to adjust the leading. A change in the line height or leading can influence the readability and tone of the text. The method for calculating the leading is the measurement from the baseline of the top line to the baseline of the next line down the order. The common practice is to add 20% to your font size to have your line height or leading. So if your font is 1em in height, then the line height or leading would be 1.2em.

In CSS, you will also come across a white-space property that allows you to describe precisely how different web browsers interpret whitespace characters in the code. In a typical HTML code, user agents fall whitespace characters down to only one. That means ten carriage returns in a row will be shown by the browser as one space. The white-space property consists of certain ways to describe the text enclosed such as pre, nowrap, pre-wrap and pre-line.

Tags: Space Characteristic of a Web Page