जब CSS का use करके किसी भी text या word के बीच space देना हो text-spacing property का use किया जाता है। किसी भी text में spacing को manage करने लिए कुछ property का use किया जाता है जो इस प्रकार है :
- text-indent
- letter-spacing
- line-height
- word-spacing
- white-space
आइये इसे एक एक करके समझने का प्रयास करते है।
text-indent property of CSS Text Spacing
किसी भी text line में paragraph देते time margin से कितना gape छोड़ना है इसको decide करने के लिए इस property का use किया जाता है।
Syntax
p{
text-indent : 50px;
}Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS text-indent example By Technalay</title>
</head>
<body>
<p style="text-indent:50px;">There are many variations of passages of Lorem Ipsum available,<br/> but the majority have suffered alteration in some form,<br/>by injected humour, or randomised words which don't look</br> even slightly believable.</p>
</body>
</html>Preview
There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form,
by injected humour, or randomised words which don’t look
even slightly believable.
letter-spacing property of CSS Text Spacing
किसी भी text के हर एक character के बीच space देने के लिए letter-spacing property का use किया जाता है।
Syntax
p{
letter-spacing : 5px;
}Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS letter-spacing example by Technalay </title>
</head>
<body>
<p style="letter-spacing:5px;">This is simple letter-spacing</p>
<p style="letter-spacing:10px;">This is simple letter-spacing</p>
<p style="letter-spacing:2px;">This is simple letter-spacing</p>
<p style="letter-spacing:1px;">This is simple letter-spacing</p>
</body>
</html>Preview
This is simple letter-spacing
This is simple letter-spacing
This is simple letter-spacing
This is simple letter-spacing
line-height property of CSS Text Spacing
इस property का use किसी भी text line के height को बढ़ाने के लिए किया जाता है।
p{
line:height:10px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS line-height example by Technalay</title>
<style>
#p1{
line-height : 15px;
}
#p2{
line-height : 25px;
}
#p3{
line-height : 40px;
}
</style>
</head>
<body>
<h3>line-height : 10px;</h3>
<p id="p1">There are many variations of passages of Lorem Ipsum available, <br/>but the majority have suffered alteration in some form, by injected humour, <br/>or randomised words which don't look even slightly believable.</p>
<h3>line-height : 20px;</h3>
<p id="p2">There are many variations of passages of Lorem Ipsum available, <br/>but the majority have suffered alteration in some form, by injected humour, <br/>or randomised words which don't look even slightly believable.</p>
<h3>line-height : 30px;</h3>
<p id="p3">There are many variations of passages of Lorem Ipsum available, <br/>but the majority have suffered alteration in some form, by injected humour, <br/>or randomised words which don't look even slightly believable.</p>
</body>
</html>word-spacing property of CSS Text Spacing
इस property का use दो word के बीच space देने के लिए किया जाता है।
Syntax
p{
word-spacing : 5px;
}Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS word-spacing example by technalay </title>
</head>
<body>
<p style="word-spacing:1px;">This is example of word-spacing</p>
<p style="word-spacing:10px;">This is example of word-spacing</p>
<p style="word-spacing:20px;">This is example of word-spacing</p>
<p style="word-spacing:40px;">This is example of word-spacing</p>
</body>
</html>This is example of word-spacing
This is example of word-spacing
This is example of word-spacing
This is example of word-spacing
word-spacing property of CSS Text Spacing
इस property का use दो word के बीच white space को manage करने के लिए किया है।