Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Setting Spaces Between Letters with CSS Letter Spacing Property
Using the CSS letter-spacing property, we can specify the amount of space between letters of text. The letter spacing can be set in px, em, etc. length units. Let us see the syntax.
Syntax
The following is the syntax of the letter-spacing property −
letter-spacing: value;
The value can be −
Normal − Normal space between characters.
Length − A length for the space between the characters
The following examples illustrate CSS letter-spacing property −
Set letter spacing in em
In this example, we have set the spacing between letters using the <em>. An em is a unit of measurement that is relative to the size of the font. One em is 16px −
letter-spacing: 2em;
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
p:first-of-type {
margin: 3%;
padding: 3%;
background-color: seagreen;
color: white;
letter-spacing: 2em;
font-size: 2em;
text-align: center;
}
</style>
</head>
<body>
<p>BOOM</p>
<p>BOOM</p>
</body>
</html>
Set letter spacing in px
In this example, we have set the spacing between letters using the px. The px stands for pixels −
letter-spacing: 12px;
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
margin: 3%;
padding: 3%;
border: 23px ridge navy;
}
p {
margin: 3%;
background-color: navajowhite;
letter-spacing: 12px;
font-size: 1.2em;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>BOOM</p>
<p>abcdefghijklmnop-qrstuvwxyz</p>
</div>
</body>
</html>
Set letter spacing with a negative value
The letter spacing can be set with a negative value using the letter-spacing property −
.demo2 {
letter-spacing: -1px;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
letter-spacing: 20px;
}
.demo2 {
letter-spacing: -1px;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p class="demo">This is a demo text.</p>
<p class="demo2">This is another demo text.</p>
</body>
</html>
243 Views
