Để thụt lề văn bản, sử dụng thuộc tính text-indent trong CSS. Thuộc này áp dụng cho dòng đầu tiên của đoạn văn.
Ví dụ 1: 30px
<!DOCTYPE html>
<html>
<head>
<style>
div { text-indent: 30px; }
</style>
</head>
<body>
<h1>Tiêu đề Demo</h1>
<div>
<p>Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.</p>
</div>
</body>
</html>
Kết quả
Ví dụ 2: 15em (tương đối font-size)
<!DOCTYPE html>
<html>
<head>
<style>
div { text-indent: 15em; }
</style>
</head>
<body>
<h1>Tiêu đề Demo</h1>
<div>
<p>Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.</p>
</div>
</body>
</html>
Kết quả
Lưu ý:
- Chỉ ảnh hưởng đến dòng đầu tiên của block container
- Giá trị âm tạo hiệu ứng treo (hanging indent)
- Đơn vị: px, em, rem, %, cm...
- Kế thừa từ cha
- Dùng cho đoạn văn in ấn, bài báo, sách