Thuộc tính text-indent trong CSS
Bùi Tấn Lực - 998
- 02/10/2025
Chức năng của Thuộc tính text-indent trong CSS
Thuộc tính text-indent trong CSS dùng để thuộc lề dòng đầu tiên trong một phần tử HTML, đơn vị thuộc lề gồm: px, em, %, số âm,... hoặc dùng initial để về mặc định 0px.
Cú pháp của Thuộc tính text-indent trong CSS
text-indent: giatri;
giatri: Giá trị để thuộc lề dòng đầu tiên trong một phần tử HTML (Ví dụ: 0px, 5px, 15px, 10%,.....)
Code Thuộc tính text-indent trong CSS
text-indent: 0px;
text-indent: 30px;
text-indent: 10%;
text-indent: -15px;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính text-indent trong CSS</title>
<style>
p {border:1px solid red; padding:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính text-indent trong CSS</h1>
<span>Dùng để thuộc lề dòng đầu tiên trong một phần tử HTML, đơn vị thuộc lề gồm: px, em, %, số âm,... hoặc dùng initial để về mặc định 0px:</span>
<p style="text-indent: 0px;" >Text-indent: 0px, Hãy Chạy thử Code Thuộc tính text-indent trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả</p>
<p style="text-indent: 30px;" >Text-indent: 30px, Hãy Chạy thử Code Thuộc tính text-indent trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả</p>
<p style="text-indent: 10%;" >Text-indent: 10%, Hãy Chạy thử Code Thuộc tính text-indent trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả</p>
<p style="text-indent: -15px;" >Text-indent: -15px, Hãy Chạy thử Code Thuộc tính text-indent trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả</p>
</body>
</html>
Ứng dụng text-indent trong CSS vào thực tế
Thuộc tính text-indent phát huy hiệu quả khi cần tạo độ thụt cho dòng đầu tiên của một đoạn văn. Thay vì chèn khoảng trắng thủ công, bạn có thể kiểm soát khoảng cách bằng CSS và dễ dàng thay đổi theo thiết kế.
Thụt đầu dòng đoạn văn bằng text-indent
Cách dùng phổ biến nhất là đặt giá trị dương cho text-indent để đẩy dòng đầu tiên vào bên trong so với các dòng còn lại. Cách này phù hợp với những nội dung có nhiều đoạn văn liên tiếp và cần tạo cảm giác giống bố cục văn bản truyền thống.
p {
text-indent: 2em;
}
Trong ví dụ trên, chỉ dòng đầu tiên của mỗi đoạn được thụt vào, còn những dòng tiếp theo vẫn bắt đầu tại vị trí thông thường.
Tạo khoảng thụt đầu dòng khác nhau cho từng đoạn
Không phải mọi đoạn văn đều cần cùng một mức thụt. Bạn có thể gán class riêng cho từng nhóm nội dung để kiểm soát khoảng cách phù hợp với bố cục.
.doan-ngan {
text-indent: 1em;
}
.doan-dai {
text-indent: 3em;
}
Cách này hữu ích khi thiết kế các khu vực nội dung có mục đích trình bày khác nhau. Tuy nhiên, nên giữ mức thụt nhất quán trong cùng một nhóm nội dung để giao diện không bị rối mắt.
Kết hợp text-indent với các thuộc tính CSS khác
text-indent chỉ tác động đến phần thụt đầu dòng, vì vậy có thể kết hợp với line-height, margin hoặc text-align để hoàn thiện cách trình bày văn bản.
p {
text-indent: 2em;
line-height: 1.7;
text-align: justify;
}
Việc kết hợp nên dựa trên mục đích thiết kế thay vì thêm nhiều thuộc tính không cần thiết. Chẳng hạn, text-indent xử lý điểm bắt đầu của dòng đầu tiên, trong khi line-height kiểm soát khoảng cách giữa các dòng.
Những trường hợp không nên sử dụng text-indent
Không nên dùng text-indent để thay thế cho khoảng cách giữa các đoạn hoặc căn chỉnh toàn bộ khối nội dung. Nếu mục tiêu là tạo khoảng cách giữa hai đoạn, margin thường phù hợp hơn.
Ngoài ra, với tiêu đề, nút bấm hoặc các thành phần giao diện ngắn, việc thụt dòng thường không mang lại lợi ích về bố cục. Hãy sử dụng text-indent khi thực sự muốn thay đổi vị trí bắt đầu của dòng đầu tiên, tránh dùng thuộc tính này như một cách tạo khoảng trống thủ công.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính text-indent trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
