Word spacing in css
In this article we are going to learn about word spacing property in css, how to increase or decrease space between words in a sentence.
We learnt about css in general, selectors css, positions in css, display in css, lists style in css, multiple css, fixed layout in css, liquid layout in css, links style in css, box shadow in css, text align in css, table style in css, text shadow in css and letter spacing in css so, we will be focusing on word spacing.
Word spacing
Word spacing is a Cascading Style Sheet property used to increase or decrease space (kerning) or gap between words or each word in a sentence.
Let us create a div element with 5px word spacing property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.word-spacing-example {
word-spacing: 5px;
}
<style/>
</head>
<body>
<div class="word-spacing-example">This is a div element with 5px word spacing applied.</div>
</body>
</html>
So, we should have the following results.
Let us create another div element with 1px word spacing property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.word-spacing-example {
word-spacing: 1px;
}
<style/>
</head>
<body>
<div class="word-spacing-example">This is a div element with 1px word spacing applied.</div>
</body>
</html>
So, we should have the following results.
Let us create two div elements with 5px and -5px word spacing applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.word-spacing-example1 {
word-spacing: 5px;
float: left;
width: 45%;
}
.word-spacing-example2 {
word-spacing: -2px;
float: right;
width: 45%;
}
<style/>
</head>
<body>
<div class="word-spacing-example1">This is a div element with 5px word spacing applied.</div>
<div class="word-spacing-example2">This is a div element with -2px word spacing applied.</div>
</body>
</html>
So, we should have the following results.
Let us create two div elements with 3px and 0px word spacing property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.word-spacing-example1 {
word-spacing: 3px;
float: left;
width: 45%;
}
.word-spacing-example2 {
word-spacing: 0px;
float: right;
width: 45%;
}
<style/>
</head>
<body>
<div class="word-spacing-example1">This is a div element with 3px word spacing applied.</div>
<div class="word-spacing-example2">This is a div element with 0px word spacing applied.</div>
</body>
</html>
So, we should have the following results.