Css text spacing top

CSS Text Properties

In this reference we will look at how to control text appearance using style sheets. CSS gives you precise control over typography in your Web pages, allowing you to set parameters such as the spacing between lines, words and even letters, and the alignment and indenting of text.

We’ll look at the different text properties that can be used with CSS, and explain each property with some real-world examples. Each example is displayed as it would render in your browser.

There are eight properties that can be used to control text appearance – word-spacing , letter-spacing , text-decoration , vertical-align , text-transform , text-align , text-indent and line-height . Let’s look at each of these properties in turn.

word-spacing

This property controls the amount of space added to the default spacing between each word. The allowable values are:

normal will select the default word spacing.

length will add the specified value to the default word spacing. length values are specified using the CSS length units such as em , px , cm and pt . For a full description of these, see the CSS units reference.

Examples:

`Take some more tea,’ the March Hare said to Alice, very earnestly.

letter-spacing

This property is similar to word-spacing , but controls the spacing added between each individual letter. Possible values are:

normal will select the default letter spacing.

length will add the specified value to the default letter spacing. length values are specified using the CSS length units such as em , px , cm and pt . For a full description of these, see the CSS units reference.

Examples:

`Take some more tea,’ the March Hare said to Alice, very earnestly.

`Take some more tea,’ the March Hare said to Alice, very earnestly.

text-decoration

The text-decoration property allows you to control decorations that can be added to the text, such as strike-throughs, underlining, and (heaven forbid!) blinking. Possible values are:

Examples:

`Take some more tea,’ the March Hare said to Alice, very earnestly.

`Take some more tea,’ the March Hare said to Alice, very earnestly.

vertical-align

This property controls the vertical placement of the text. It’s similar to the valign attribute in HTML. The allowable values are:

The following 6 values are relative to the parent element:

baseline aligns the baseline with the parent’s baseline. This is the default.

middle aligns the vertical midpoint of the element (e.g. an image) with the baseline plus half the x-height of the parent. The is the height of the letter ‘x’ in the context of this line of text. See the CSS units reference for details.

sub displays the element as subscript text.

super displays the element as superscript text.

text-top aligns the top of the element with the top of the font used for the parent element.

text-bottom aligns the bottom of the element with the bottom of the font used for the parent element.

The next two values are relative to the line that the element is in, as opposed to the parent element:

top causes the top of the element to be aligned vertically with the tallest element on the line.

bottom causes the bottom of the element to be aligned vertically with the lowest element on the line.

The final value, percentage , specifies a percentage of the element’s line height (see the line-height property below). It raises or lowers the baseline by a percentage of the line-height above the baseline of the parent. For example, a value of 50% will raise the baseline to halfway between the parent’s baseline and the baseline of the line above. A value of -100% will lower the baseline to the same height as the baseline of the line below.

Examples:

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.

text-transform

text-transform controls the case of the text. You can transform all the text into capitals or lowercase, or just capitalize the first letter of each word. The options are:

capitalize uppercases the first character of each word, while uppercase and lowercase transform the whole text into all upper-case or lower-case characters respectively. none removes all transformations from the text and displays it as-is.

Examples:

`Take some more tea,’ the March Hare said to Alice, very earnestly.

`Take some more tea,’ the March Hare said to Alice, very earnestly.

text-align

This property is similar to the align attribute in HTML. Options are:

left , right and center perform the same actions as their HTML counterparts. justify creates columns of text that are aligned along their left and right edges, like the text in a book.

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.

text-indent

This property allows you to indent the first line of text in a paragraph. The options are:

A length is specified using the CSS length units such as em , px , cm and pt . For a full description of these, see the CSS units reference.

percentage is a percentage of the parent element’s width.

Examples:

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.

line-height

The final text property, line-height , controls the distance between lines of text. Possible values are:

normal sets the line height to the default or inherited value, while specifying a number results in a line height of the default value multiplied by that number.

A length is specified using the CSS length units such as em , px , cm and pt . For a full description of these, see the CSS units reference.

percentage is a percentage of the element’s font size.

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.

Reader Interactions

Comments

Great instruction presented in very easy to understand way. Some instruction on how to add a text label with raised word would be great. FOr example, Sale flag for category nav etc.’
Great work

Leave a Reply Cancel reply

To include a block of code in your comment, surround it with

.

tags. You can include smaller code snippets inside some normal text by surrounding them with . tags.

Allowed tags in comments: .

Primary Sidebar

Hire Matt!

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Recent Posts

Источник

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

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.

Источник

letter-spacing

The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing causes characters to spread farther apart, while negative values of letter-spacing bring characters closer together.

Try it

Syntax

/* Keyword value */ letter-spacing: normal; /* values */ letter-spacing: 0.3em; letter-spacing: 3px; letter-spacing: 0.3px; /* Global values */ letter-spacing: inherit; letter-spacing: initial; letter-spacing: revert; letter-spacing: revert-layer; letter-spacing: unset; 

Values

The normal letter spacing for the current font. Unlike a value of 0 , this keyword allows the user agent to alter the space between characters in order to justify text.

Specifies extra inter-character space in addition to the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text.

Accessibility concerns

A large positive or negative letter-spacing value will make the word(s) the styling is applied to unreadable. For text styled with a very large positive value, the letters will be so far apart that the word(s) will appear like a series of individual, unconnected letters. For text styled with a very large negative value, the letters will overlap each other to the point where the word(s) may be unrecognizable.

Legible letter-spacing must be determined on a case-by-case basis, as different font families have different character widths. There is no one value that can ensure all font families automatically maintain their legibility.

Internationalization concerns

Some written languages should not have any letter spacing applied. For instance, languages that use the Arabic script expect connected letters to remain visually connected, as in the following example. Applying letter spacing will lead the text to look broken.

Formal definition

Источник