Managing Spacing between Words with CSS word-spacing Property

CSS | word-spacing Property: Learn about the word-spacing property, how to manage spaces between the words in a webpage?
Submitted by Apurva Mathur, on June 25, 2022

CSS word-spacing Property

The word-spacing property is a type of CSS property that allows the user to set some specific space between the texts. This property is really helpful when users want to enhance or reduce the number of spaces. CSS also has one similar property called letter-spacing; this property allows users to set some specific spaces between the characters/letters. Both the properties are similar in their working.

It mainly has two types of parameters:

  • Normal: This parameter works the same as it sounds; it provides regular space between the words. We can also say that this is the default space provided by the browser.
  • Length: If we want to provide additional spaces then this parameter is used. In this parameter, we can give values in px, in, cm, em, etc.

Syntax:

element_name {word-spacing:value;}

Example of CSS word-spacing Property

<html>
   <head>
      <style>
         body{
         text-align: center;
         background-color: honeydew;
         }
         h1{
         word-spacing: 5cm;
         font-size: 45px;
         color: blue;
         }
         h2{
         word-spacing: 20px;
         font-size: 40px;
         color: rebeccapurple;
         }
         h3{
         word-spacing: 80in;
         font-size: 50px;
         color: red;
         }
      </style>
   </head>
   <body>
      <h1> Include help welcomes you </h1>
      <h2>Our aim is to make you "an expert in Computer programming languages".</h2>
      <h3>IncludeHelp is a FREE site </h3>
   </body>
</html>

Output:

Example: CSS word-spacing Property

Explanation:

In the above example, I've taken three heading tags and I've tried to explain how we can apply a different set of values to apply word-spacing property? You can also use negative values in this property; it will merge the words depending upon the range of values provided.

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT




Comments and Discussions!




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.