CSS Text Positioning and Spacing

The following CSS properties can be used to adjust the way letters, words and lines of text are laid out in relation to one another and the page.

line-height

The line-height property defines the amount of space between lines of text on a web page. This is very useful for controlling what is known as the page's "white space" - the gaps in between all of the HTML elements. It is widely accepted that more white space makes a page easier to read.

p {
line-height: 1.4em;
}

letter-spacing

This CSS property allows you to specify the gaps between letters. It can be specified in the usual units, such as pixels or ems. Letter spacing is added to the default letter spacing, so for example if you give it a value of 1px, the letter spacing will actually be 1px plus the default letter spacing. You can use positive letter spacing to move letters further apart or negative spacing to move them closer together:

p {
letter-spacing: -1px;
}

word-spacing

The CSS word-spacing property works in exactly the same way as the letter-spacing property, except this time it controls the spacing between words rather than letters (hardly rocket science I know!).

p {
word-spacing: 2px;
}

text-align

Allows us to align text within an element. You can choose from left, right, center, or justify. Note that this property aligns text within its containing element, not in the entire page. Block-level elements such as paragraphs <p> and divisions <div> fill the entire page width by default, so they would indeed center on the page, but inline elements such as <span> automatically size to the width of the content, so all alignments would appear the same.

You can explicitly declare the width of an inline or block-level element using the width property; if you do this then the text will be aligned within this width.

p {
width: 400px;
text-align: center;
}

text-indent

The CSS text-indent property indents the first line of text within an element. You can specify the indent amount however you want, for example in pixels or ems. text-indent values can be negative to pull the text towards the left-hand side of the page.

p {
text-indent: 10px;
}