CSS word-spacing
CSS is all about presentation. Discover how CSS word-spacing works to transform plain HTML into a premium user experience in the guide below.
This CSS attribute is employed to manage the spacing between words. By utilizing this attribute, we have the ability to adjust the spacing between words as needed.
It adjusts the spacing between words rather than individual characters, resembling the letter-spacing attribute in CSS. This property specifically controls the distance between words within a text block.
A significant negative or positive word-spacing value can render the text illegible. When a highly positive value is used, it results in words appearing as disjointed and separate entities. Conversely, an extremely negative value causes words to overlap, leading to a lack of readability.
Syntax
word-spacing: normal | length | initial | inherit;
Property Values
It represents the default setting that specifies the standard space (0.25em) between words. This value is employed to indicate the space determined by the web browser.
It defines an additional gap between words in terms of size (in pt, px, em, cm, etc.). Negative values are also permitted.
It is utilized to restore the property to its original default value.
Acquire: It acquires the value from its parent component.
Example
<!DOCTYPE html>
<html>
<head>
<title>
CSS word-spacing Property
</title>
<style>
body{
text-align: center;
}
#space{
word-spacing: 40px;
}
p{
color: red;
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<h1>The word-spacing Property</h1>
<div>
<h2>word-spacing: normal;</h2>
<p>
Welcome to the C# Tutorial
</p>
</div>
<div>
<h2>word-spacing: 40px;</h2>
<p id= "space">
Welcome to the C# Tutorial
</p>
</div>
</body>
</html>
Output
Example
<!DOCTYPE html>
<html>
<head>
<title>
CSS word-spacing Property
</title>
<style>
body{
text-align: center;
}
#space{
word-spacing: 2cm;
}
#space1{
word-spacing: -50px;
}
#space2{
word-spacing: initial;
}
p{
color: red;
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<h1>The word-spacing Property</h1>
<div>
<h2>word-spacing: 2cm;</h2>
<p id = "space">
Welcome to the C# Tutorial
</p>
</div>
<div>
<h2>word-spacing: -50px;</h2>
<p id= "space1">
Welcome to the C# Tutorial
</p>
</div>
<div>
<h2>word-spacing: initial;</h2>
<p id= "space2">
Welcome to the C# Tutorial
</p>
</div>
</body>
</html>
Output
