Khoảng cách văn bản CSS

Lùi văn bản

text-indent Thuộc tính được sử dụng để chỉ định cách lùi dòng đầu tiên của văn bản:

Mô hình

p {
  text-indent: 50px;
}

Thử trực tiếp

Khoảng cách giữa các chữ cái

letter-spacing Thuộc tính được sử dụng để chỉ định khoảng cách giữa các ký tự trong văn bản.

Dưới đây là ví dụ về cách tăng hoặc giảm khoảng cách giữa các ký tự:

Mô hình

h1 {
  letter-spacing: 3px;
}
h2 {
  letter-spacing: -3px;
}

Thử trực tiếp

Khoảng cách dòng

line-height Thuộc tính xác định khoảng cách giữa các dòng:

Mô hình

p.small {
  line-height: 0.8;
}
p.big {
  line-height: 1.8;
}

Thử trực tiếp

Khoảng cách từ

word-spacing Thuộc tính xác định khoảng cách giữa các từ trong văn bản.

Dưới đây là ví dụ minh họa cách tăng hoặc giảm khoảng cách giữa các từ:

Mô hình

h1 {
  word-spacing: 10px;
}
h2 {
  word-spacing: -5px;
}

Thử trực tiếp

Khoảng trống

white-space Thuộc tính xác định cách xử lý khoảng trống nội bộ phần tử.

Mô hình này minh họa cách vô hiệu hóa việc thay đổi dòng văn bản trong phần tử:

Mô hình

p {
  white-space: nowrap;
}

Thử trực tiếp