The CSS text spacing works with CSS properties to maintain and add space between words, lines, all words, and any two letters. We can design the word format and space with external, internal and inline style tags. The spacing in text helps to add length and make more readable text on the web page. There are four ways to add text spacing using CSS properties.
- Spacing between all letters
- Spacing between any two letters
- Spacing between words
- Spacing between lines
- The first line of text spacing
Spacing between All Letters
The CSS property responsible for adjusting the space between individual characters is known as letter spacing. This property functions by accepting various values such as the keyword "normal," pixel values (e.g., 10px), and em values (e.g., 0.25em). It is possible to apply both positive and negative values when utilizing the letter-spacing property.
Syntax
The syntax demonstrates the application of letter spacing in CSS.
<style>
.class_name{
letter-spacing : 10px;
/* OR */
letter-spacing : 0.25em;
}
</style>
Examples
The subsequent instances demonstrate letter spacing adjustments in CSS, showcasing various positive and negative values for altering the space between characters.
Example 1:
The demonstration illustrates the fundamental adjustment of space between individual characters by utilizing CSS letter-spacing properties. In this scenario, positive values are employed to increase the spacing between text elements.
<!DOCTYPE html>
<html>
<head>
<title> CSS text spacing
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height:310px;
border : 2px solid grey;
letter-spacing: 8px;
}
.flex-containers{
letter-spacing: 0.25em;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> CSS text spacing </h3>
<h5> Spacing between all letters using letter spacing property </h5>
<div class = "flex-containers">
<p class = "clip"> First paragraph </p>
<p class = "clip2"> second paragraph </p>
<b class = "clip3"> First bold information </b>
<p class = "clip"> Third paragraph </p>
<p class = "clip2"> Fourth paragraph </p>
<p class = "clip2"> Fifth paragraph </p>
</div>
</div>
</body>
</html>
Output
The result displays the letter spacing across the HTML document.
Example 2:
The sample demonstrates the fundamental distinction in spacing among individual characters through CSS letter-spacing attributes. In this case, negative values can be applied to adjust the spacing of the text.
<!DOCTYPE html>
<html>
<head>
<title> CSS text spacing
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height:310px;
border : 2px solid grey;
letter-spacing: 5px;
}
.flex-containers{
letter-spacing: 0.15em;
}
.clip2{
letter-spacing: -1px;
}
b{
letter-spacing: -0.09em;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> CSS text spacing </h3>
<h5> Spacing between all letters using letter spacing property </h5>
<div class = "flex-containers">
<p class = "clip"> First paragraph </p>
<p class = "clip2"> second paragraph </p>
<b class = "clip3"> First bold information </b>
<p class = "clip4"> Third paragraph </p>
<p class = "clip2"> Fourth paragraph </p>
<p class = "clip2"> Fifth paragraph </p>
</div>
</div>
</body>
</html>
Output
The result displays the letter spacing for the HTML document.
Spacing between Words
The gap between text elements is established using the CSS attribute word spacing. The text spacing attribute operates with various values like the keyword (normal), pixel (10px), and em (0.25em). Both positive and negative values can be applied in conjunction with the word spacing attribute.
Syntax
The syntax demonstrates the utilization of word spacing within CSS.
<style>
element{
word-spacing : 10px;
/* OR */
word-spacing : 0.25em;
}
</style>
Examples
The provided instances demonstrate the spacing applied to all words within CSS. This illustration showcases various word-spacing values, including both positive and negative formats.
Example 1:
The illustration demonstrates the fundamental spacing among all words by utilizing CSS word-spacing attributes. In this case, positive values are employed to adjust the spacing between words.
<!DOCTYPE html>
<html>
<head>
<title> CSS text spacing
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height: 310px;
border : 2px solid grey;
word-spacing: 12px;
}
.flex-containers{
word-spacing: 0.35em;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> CSS text spacing </h3>
<h5> Spacing between all words using word spacing property </h5>
<div class = "flex-containers">
<p class = "clip"> First paragraph </p>
<p class = "clip2"> second paragraph </p>
<b class = "clip3"> First bold information </b>
<p class = "clip"> Third paragraph </p>
<p class = "clip2"> Fourth paragraph </p>
<p class = "clip2"> Fifth paragraph </p>
</div>
</div>
</body>
</html>
Output
The result displays all word spacing within the HTML document.
Example 2:
The example illustrates the fundamental distinction in spacing among all words by utilizing CSS word-spacing attributes. In this case, negative values can be applied to adjust the word spacing.
<!DOCTYPE html>
<html>
<head>
<title> CSS text spacing
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height:310px;
border : 2px solid grey;
word-spacing: 15px;
}
.flex-containers{
word-spacing: 0.25em;
}
.clip2{
word-spacing: -3px;
}
b{
word-spacing: -0.19em;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> CSS text spacing </h3>
<h5> Spacing between all words using word spacing property </h5>
<div class = "flex-containers">
<p class = "clip"> First paragraph </p>
<p class = "clip2"> second paragraph </p>
<b class = "clip3"> First bold information </b>
<p class = "clip4"> Third paragraph </p>
<p class = "clip2"> Fourth paragraph </p>
<p class = "clip2"> Fifth paragraph </p>
</div>
</div>
</body>
</html>
Output
The result displays all spacing between words on the HTML document.
Spacing between Lines
The gap between lines of text is established using the CSS attribute text-height. This attribute can be applied with values such as the keyword (normal), pixel (10px), and em (0.25em). Positive and negative values can be utilized with the line height within the inline, internal, and external properties.
Syntax
The syntax demonstrates the implementation of letter spacing in CSS.
<style>
.class_name{
letter-spacing : 10px;
/* OR */
letter-spacing : 0.25em;
}
</style>
Examples
The upcoming instances demonstrate the spacing between lines' height in CSS. The illustration showcases varying values for line height spacing, including positive and negative formats.
Example 1:
The demonstration employs CSS to adjust the line spacing between two lines of text. In this case, the line height is applied uniformly across all containers to control the spacing between lines of text.
<!DOCTYPE html>
<html>
<head>
<title> CSS text spacing
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: aqua;
height:310px;
border : 2px solid grey;
line-height: 25px;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> CSS text spacing </h3>
<h5> Spacing between text lines using CSS property </h5>
<div class = "flex-containers">
<p class = "clip"> First paragraph </p>
<p class = "clip2"> second paragraph </p>
<b class = "clip3"> First bold information </b>
<p class = "clip4"> Third paragraph </p>
<p class = "clip2"> Fourth paragraph </p>
</div>
</div>
</body>
</html>
Output
The result displays the line spacing within the HTML document.
Example 2:
The illustration demonstrates the utilization of CSS to adjust the line height, which determines the spacing between two lines of text. In this case, we apply the line height property to control the space between text lines across various elements.
<!DOCTYPE html>
<html>
<head>
<title> CSS text spacing
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: aqua;
height: 250px;
border : 2px solid grey;
line-height: -25px;
}
h3{
line-height: -25px;
}
.clip{
line-height: 15px;
}
.clip2{
line-height: 1px;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> CSS text spacing </h3>
<h5> Spacing between text lines using CSS property </h5>
<div class = "flex-containers">
<p class = "clip"> First paragraph </p>
<p class = "clip2"> second paragraph </p>
<b class = "clip3"> First bold information </b>
<p class = "clip4"> Third paragraph </p>
<p class = "clip2"> Fourth paragraph </p>
</div>
</div>
</body>
</html>
Output
The result displays the line spacing on the HTML document.
Example 3:
The illustration demonstrates the line spacing of the dual lines by employing CSS inline elements. In this case, we apply the line height to adjust the spacing between the text elements as needed.
<!DOCTYPE html>
<html>
<head>
<title> CSS text spacing
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: aqua;
height: 300px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h3 style = "line-height: 55px;"> CSS text spacing </h3>
<h5> Spacing between text lines using CSS property </h5>
<div class = "flex-containers">
<p class = "clip" style = "line-height: 5px;"> First paragraph </p>
<p class = "clip2"> second paragraph </p>
<b class = "clip3" style = "line-height:02em;"> First bold information </b>
<p class = "clip4"> Third paragraph </p>
<p class = "clip2"> Fourth paragraph </p>
</div>
</div>
</body>
</html>
Output
The result displays the line spacing within the HTML document.
Spacing between any two letters
We have the ability to generate gaps between individual letters by leveraging CSS attributes. Introduce the <span> element around the letters and apply the letter-spacing attribute with the desired spacing value. This technique allows for customizing the spacing within specific text enclosed by the tag.
Examples
The subsequent instances illustrate the distance between two characters and their vertical dimension specified in CSS. The demonstration showcases various spacing values, both positive and negative, to adjust the layout.
Example 1:
The demonstration illustrates the utilization of CSS to display the space between adjacent letters. In this scenario, we incorporate spacing between text or words within all the containers.
<!DOCTYPE html>
<html>
<head>
<title> CSS text spacing
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height:310px;
border : 2px solid grey;
}
span{
word-spacing: 55px;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> CSS text spacing between two word </h3>
<h5> Spacing between <span> two </span> words using CSS property </h5>
<div class = "flex-containers">
<p class = "clip"> <span> First </span> paragraph </p>
<p class = "clip2"> <span style = "word-spacing: 15px;"> second </span> paragraph </p>
<b class = "clip3"> First <span> bold information </span> </b>
<p class = "clip4"> Third paragraph </p>
<p class = "clip2"> Fourth paragraph </p>
</div>
</div>
</body>
</html>
Output
The result displays the gap between two words within the HTML document.
Example 2:
The sample employs CSS to display the line height or the gap between the two words.
<!DOCTYPE html>
<html>
<head>
<title> CSS text spacing
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height:310px;
border : 2px solid grey;
}
span{
letter-spacing: 15px;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> CSS text spacing and line height between two words </h3>
<h5> Spacing between <span> two </span> words using CSS property </h5>
<div class = "flex-containers">
<p class = "clip"> <span> First </span> paragraph </p>
<p class = "clip2"> <span style = "line-height: 55px;"> second </span> paragraph </p>
<b class = "clip3"> First <span> bold information </span> </b>
<p class = "clip4"> Third paragraph </p>
<p class = "clip2"> Fourth paragraph </p>
</div>
</div>
</body>
</html>
Output
The result displays the line spacing on the HTML document.
First Line of Text Spacing
The CSS text-indent attribute increases the indentation of the initial line in the text displayed on a webpage. It allows us to select either the container or the tag and adjust the text-indent attribute to introduce space at the beginning of the first line.
Syntax
The syntax demonstrates the utilization of the initial line spacing in CSS.
<style>
.class_name{
text-indent : 10px;
/* OR */
text-indent : 0.25em;
}
</style>
Examples
The subsequent instances demonstrate the indentation of initial lines within CSS text. The illustration showcases a range of spacing values, including positive and negative formats.
Example 1:
CSS is employed in the example to adjust the spacing between two lines, known as line height. In this case, the line height is applied uniformly across all text lines within the container.
<!DOCTYPE html>
<html>
<head>
<title> CSS text spacing
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height:310px;
border : 2px solid grey;
text-indent: 25px;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> CSS text spacing </h3>
<h5> Spacing of the first text line using CSS property </h5>
<div class = "flex-containers">
<p class = "clip"> First paragraph. <br>
The CSS text-indent property adds space to the first line of the text on the web page.
</p>
<p class = "clip2"> second paragraph </p>
<b class = "clip3"> First bold information </b> <br>
<b class = "clip3"> second bold information </b>
<p class = "clip4"> Third paragraph </p>
<p class = "clip2"> Fourth paragraph </p>
</div>
</div>
</body>
</html>
Output
The output is displayed as the first line of text on an HTML webpage.
Example 2:
The illustration demonstrates the gap between the initial line of text within the passage.
<!DOCTYPE html>
<html>
<head>
<title> CSS text spacing
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height:310px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h3 style = "text-indent:05em;"> CSS text spacing </h3>
<h5> Spacing of the first text line using CSS property </h5>
<div class = "flex-containers">
<p class = "clip" style = "text-indent:25px;"> First paragraph. <br>
The CSS text-indent property adds space to the first line of the text on the web page.
</p>
<p class = "clip2"> second paragraph </p>
<b class = "clip3"> First bold information </b> <br>
<b class = "clip3" style = "text-indent:25px;"> second bold information </b>
<p class = "clip4"> Third paragraph </p>
<p class = "clip2" style = "text-indent:-25px;"> Fourth paragraph </p>
</div>
</div>
</body>
</html>
Output
The result displays the line spacing on the HTML document.
Conclusion
In summary, The CSS properties for text spacing contribute to presenting content in an appealing and user-friendly manner. This enhances readability and visual appeal on the webpage.