How to Set Text Spacing and Placement in CSS
Text spacing and placement in CSS is controlled using the letter-spacing , word-spacing , line-height , and text-indent properties. Learn how to set text spacing and placement in the following steps.
- The letter-spacing property is used to specify the amount of space between letters. The amount indicated is in addition to the default spacing. The amount is specified in units. For example:
The following code sample shows all of these properties in use:
Spacing and Line Height
Letter Spacing
letter-spacing: 1em letter-spacing: -1em Word Spacing
word-spacing: 1em It's a wide wide sentence. Line Height
line-height: 1.5
line-height: 1.5
line-height: 1.5 line-height: 150%
line-height: 150%
line-height: 150% line-height: 1.5em
line-height: 1.5em
line-height: 1.5em Text-Indent
text-indent:50px - text-indent only applies to the first line of text.
The next lines will not be indented. text-indent:10% - text-indent only applies to the first line of text.
The next lines will not be indented. 
The above code will render the following:
Related Articles
- Learn the Very Basics of CSS in One Minute
- How to Create a CSS External Style Sheet
- How to Align Text with CSS
- How to Create a Horizontal Navigation Menu with CSS
- How to Create a Fixed-Width Layout with CSS
- How to Remove Spacing Between Table Borders with CSS
- How to Set a Background Image with CSS
- How to Set Text Spacing and Placement in CSS (this article)
- How to Style a Table with CSS
- How to Create Boxes with Rounded Corners in CSS
- How to Create a Vertical Navigation Menu with CSS
- How to Use the CSS Opacity Property
- How to Use Multiple Background Images with CSS
- Absolute Positioning with CSS
- How to Use the CSS Border Shorthand Property
- How to Create CSS Button Links
- How to Create a Fluid-Width Layout with CSS
- How to Set Text and Background Color with CSS
- How to Create a CSS Embedded Style Sheet
- How to Add Inline Styles to CSS
- How to Create a Border with CSS
- How to Use the CSS Padding Shorthand Property
- How to Create a Fly-Out Menu with CSS
- How to Use CSS Media Queries in Responsive Design
- How to Adjust Margins with CSS
- How to Use the CSS Background Shorthand Property
- How to Create a Form without Tables Using CSS
- How to Modify Fonts in CSS
- How to Create a Drop-Down Menu with CSS
- How to Apply Padding with CSS
- Fixed Positioning with CSS
- How to Use CSS Transitions
- How to Use the CSS list-style Shorthand Property
- How to Change Text Style in CSS
- How to Create CSS Sprites
- How to Use CSS with Different Media Types
- How to Import Style Sheets with @import in CSS
- How to Use the CSS White-Space Property
- How to Use the CSS Z-index Property
- How to Create Drop Shadows with the box-shadow Property in CSS3
CSS Text Spacing
In this chapter you will learn about the following properties:
- text-indent
- letter-spacing
- line-height
- word-spacing
- white-space
Text Indentation
The text-indent property is used to specify the indentation of the first line of a text:
Example
Letter Spacing
The letter-spacing property is used to specify the space between the characters in a text.
The following example demonstrates how to increase or decrease the space between characters:
Example
Line Height
The line-height property is used to specify the space between lines:
Example
Word Spacing
The word-spacing property is used to specify the space between the words in a text.
The following example demonstrates how to increase or decrease the space between words:
Example
White Space
The white-space property specifies how white-space inside an element is handled.
This example demonstrates how to disable text wrapping inside an element:
Example
The CSS Text Spacing Properties
| Property | Description |
|---|---|
| letter-spacing | Specifies the space between characters in a text |
| line-height | Specifies the line height |
| text-indent | Specifies the indentation of the first line in a text-block |
| white-space | Specifies how to handle white-space inside an element |
| word-spacing | Specifies the space between words in a text |
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.