In this lesson, we are going to focus on the remaining text related properties such as text spacing, text alignment, and so on.
Word spacing and letter spacing
The word-spacing property is used to set the spacing between words. For instance,
1<p>Lorem ipsum dolor sit amet consectetur.</p>1p {
2 word-spacing: 10px;
3}In this example, the length is defined with the unit px, which stands for pixels, meaning the space between words would be 10 pixels.
The property also accepts negative values. Positive values make the words further away from each other, and negative values make them closer.
Letter spacing can be defined in a similar manner, using the letter-spacing property.
1p {
2 letter-spacing: 5px;
3}In most cases, you probably won't need these two properties, especially if the texts are meant for reading.
But sometimes, if you need to create certain unique styles, they might come in handy when combined with other CSS properties. For instance, the following example might be a good design for a landing page hero section.
In this case, the text is meant to be decorative, so we can adjust the spacing to make it look more artistic. But if the text is meant to be read, then the word and letter spacing should be adjusted with caution.
Line height
Besides the word and letter spacing, there is also the spacing in the vertical direction, the line height (sometimes referred to as lead), which is the distance between two baselines.
Line height can be specified using the property line-height.
1p {
2 line-height: 20px;
3}Indentation
You can also control the indentation in a text block using the text-indent property.
1p {
2 text-indent: 50px;
3}Horizontal align
By default, the texts are left aligned, but you can change that by setting a text-align property. The property accepts four values, left, right, center, and justify.
1#p1 {
2 text-align: left;
3}
4
5#p2 {
6 text-align: right;
7}
8
9#p3 {
10 text-align: center;
11}
12
13#p4 {
14 text-align: justify;
15}Notice that the last line of the paragraph is not justified. It is processed differently when text-align is set to justify.
However, you can force it to be justified using the text-align-last property. It takes the same set of values as text-align.
1p {
2 text-align: justify;
3 text-align-last: justify;
4}Vertical align
Besides horizontal alignment, you can also specify how you wish the text to be aligned vertically. By default, all the texts are aligned to the baseline, as shown in the diagram below:
Some letters will go below the baseline, such as y and p in this diagram, but they are still considered aligned to the baseline.
You can change the default behavior by setting a vertical-align property. For instance, top will align the texts to the highest letter in the same line.
1<p>AAA<span class="large">AAA</span><span class="small">aaa</span></p>1span {
2 border: 1px red solid;
3}
4
5.large {
6 font-size: large;
7}
8
9.small {
10 font-size: small;
11 vertical-align: top;
12}
To make the effect more noticeable, we have changed the font size and added borders to each element. We will discuss how to do this later. As you can see, the upper border of .small is aligned with the upper borders of .large.
On the other hand, the text-top option will align the text with the highest letter in the parent element, which is <p> in this case.
1.small {
2 font-size: small;
3 vertical-align: text-top;
4}
Notice that the .large element is ignored even though it is slightly higher because it is a sibling of .small, not the parent.
The bottom and text-bottom works similarly. bottom aligns the text to the lowest letter in the same line, and text-bottom aligns to the lowest letter in the parent element.
Lastly, the middle option aligns the text to the middle of the parent element, and the sub and super options each align to the subscript and superscript baseline of the parent text. You can test these in your own browser.