Thuộc tính text-underline-offset CSS

Định nghĩa và cách sử dụng

text-underline-offset Thuộc tính chỉ định khoảng cách lệch của văn bản gạch dưới.

Mô hình

Đặt khoảng cách lệch của văn bản gạch dưới:

div.a {
  text-decoration: underline;
}
div.b {
  text-decoration: underline;
  text-underline-offset: 10px;
}
div.c {
  text-decoration: underline wavy blue;
}
div.d {
  text-decoration: underline wavy blue;
  text-underline-offset: 10px;
}

Thử ngay

Cú pháp CSS

text-underline-offset: auto|length|percentage|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
auto Giá trị mặc định. Trình duyệt sẽ đặt khoảng cách phù hợp cho dấu gạch dưới.
length Định nghĩa khoảng cách lệch bằng giá trị độ dài.
percentage Định nghĩa khoảng cách lệch bằng phần trăm.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Ghi nhận thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: auto
Kế thừa: yes
Chế tạo animation: Không hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản: CSS4
Cú pháp JavaScript: object.style.textUnderlineOffset="1em"

Hỗ trợ trình duyệt

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

Chrome Edge Firefox Safari Opera
87.0 87.0 70.0 12.1 73.0

Trang liên quan

Hướng dẫn:Trang trí văn bản CSS

Tham khảo:Thuộc tính textDecoration của HTML DOM