Computer >> Máy Tính >  >> Lập trình >> CSS

Đặt khoảng cách giữa các chữ cái với Thuộc tính giãn cách chữ cái CSS

Sử dụng thuộc tính CSS letter-spacing, chúng ta có thể chỉ định khoảng cách giữa các chữ cái trong văn bản.

Ví dụ

Các ví dụ sau minh họa thuộc tính khoảng cách giữa các chữ cái trong 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>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Đặt khoảng cách giữa các chữ cái với Thuộc tính giãn cách chữ cái CSS

Ví dụ

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

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Đặt khoảng cách giữa các chữ cái với Thuộc tính giãn cách chữ cái CSS