CSS Text Spacing
CSS
This is used to specify the space between letters, words in a text.
CSS Text Spacing.
➔ CSS has the following properties for text spacing.
text-indentletter-spacingline-heightword-spacingwhite-space
CSS Text Indentation.
➔ The CSS text-indent property is used to specify the indentation of the first line of a text.
Syntax
text-indent: length | initial | inherit;
Property values
| Value | Description |
|---|---|
| length | Specifies a fixed indentation in units like px, em, rem, cm, etc. |
| percentage | Defines the indentation as a percentage of the width of the containing block. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Click on the "Try it Now" button to see how it works.
CSS Letter Spacing.
➔ The letter-spacing property is used to specify the space between the characters in a text.
This can be done in following ways.
Syntax
letter-spacing: normal | length | initial | inherit;
Property values
| Value | Description |
|---|---|
| normal | The default spacing for the current font. This is default. |
| length | Specifies the extra space (positive or negative) between characters using units such as px, em, rem, cm, mm, or pt. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Click on the "Try it Now" button to see how it works.
CSS Line Height.
➔ The line-height property is used to specify the space between lines.
This can be done in following ways.
Syntax
line-height: normal|number|length|initial|inherit;
Property values
| Value | Description |
|---|---|
| normal | The browser determines a "reasonable" line height based on the font, usually around 1.2 times the font size. This is default. |
| number | A number that is determined by multiplying the element's calculated font-size by the line height (recommended). |
| length | A specific line height specified in absolute or relative length units (e.g., px, em, rem, cm). |
| percentage | A line height as a percentage of the element's font-size. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Click on the "Try it Now" button to see how it works.
CSS Word Spacing.
➔ The word-spacing property is used to specify the space between the words in a text.
This can be done in following ways.
Syntax
word-spacing: normal | length | initial | inherit;
Property values
| Value | Description |
|---|---|
| normal | It uses the internal, normal amount of space between words as defined by the font or browser. This is default. |
| length | Specifies an extra space to add between words. The length value can be specified in various CSS units (e.g., px, em, rem, cm). |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Click on the "Try it Now" button to see how it works.
CSS White Space.
➔ The white-space property is used to specifies how white-space inside an element is handled.
This can be done in following ways.
Syntax
white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;
Property values
| Value | Description |
|---|---|
| normal | Text wraps automatically when it reaches the end of the line. This is default. |
| nowrap | The text does not wrap automatically and remains on a single line. |
| pre | This value behaves like the HTML <pre> tag. |
| pre-line | Sequences of white space are collapsed into a single space. |
| pre-wrap | Text wraps automatically when it is too long to fit the line length. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Click on the "Try it Now" button to see how it works.