Spacing and Alignment

This page lists CSS properties which relates to spacing and alignment of text

Text Spacing Properties

letter-spacing

Adds/subtracts the horizontal spacing between letters. Specify normal (auto) or a length (e.g. 0.2em or -0.2em).

<div id="letter-spacing-example">
  Lorem ipsum dolor sit amet
</div>

#letter-spacing-example {
  letter-spacing: 0.2em;
}

word-spacing

Adds/subtracts the horizontal spacing between words. Specify normal (auto) or a length (e.g. 0.2em or -0.4ch).

line-height

Sets the height of the line box (distance between the lines of the text). Specify:

• normal — depends on the browser
• a number — (e.g. 1.5) multiple of the element's font size
• a percentage — (e.g. 150%) relative to the element's font size
• a length — (e.g. 20px)

#line-height-example {
  line-height: 2;
}

Text Alignment Properties

text-align

Sets the horizontal alignment of text. Possible values:

• left
• right
• center
• justify
• start — (depends on writing direction)
• end — (depends on writing direction)

<div id="text-align-example">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea consequat.
</div>

#text-align-example {
  text-align: center;
}

text-align-last

Sets the horizontal alignment of the last line of text. Possible values:

• auto
• left
• right
• center
• justify
• start — (depends on writing direction)
• end — (depends on writing direction)

text-indent

Sets the indentation at the beginning of paragraphs.

Specify a length (e.g. 2em or -2em) or percentage (relative to the parent's width).

#text-indent-example {
  text-indent: 4em;
}

text-justify

Sets how text-align: justify behaves (where to put the extra spaces). Possible values:

• none — disables justification
• auto — let the browser decide
• inter-word — put the extra spaces between words
• inter-character — put the extra spaces between characters

References

• letter-spacing (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing
• line-height (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
• text-align (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
• text-align-last (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last