Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

การตั้งค่าช่องว่างระหว่างตัวอักษรด้วยคุณสมบัติการเว้นวรรคตัวอักษร CSS


การใช้คุณสมบัติการเว้นวรรคตัวอักษร CSS เราสามารถระบุจำนวนช่องว่างระหว่างตัวอักษรของข้อความได้

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงคุณสมบัติการเว้นวรรคตัวอักษร CSS

<!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>

ผลลัพธ์

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

การตั้งค่าช่องว่างระหว่างตัวอักษรด้วยคุณสมบัติการเว้นวรรคตัวอักษร CSS

ตัวอย่าง

<!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>

ผลลัพธ์

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

การตั้งค่าช่องว่างระหว่างตัวอักษรด้วยคุณสมบัติการเว้นวรรคตัวอักษร CSS