Cần thụt lề văn bản trong một phần tử HTML? Bạn có thể thụt lề dòng đầu tiên của đoạn văn bằng CSS!
Đây là cách bạn có thể làm điều đó:
Thụt lề dòng đầu tiên của đoạn văn với text-indent
Giả sử bạn có một số văn bản trong một đoạn văn như thế này:
<p class="indent">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa sit aperiam deserunt quae excepturi fugit, consequuntur cum corporis illum natus quibusdam quasi ab at. Laboriosam aperiam aut laborum animi soluta eligendi iste doloribus error, ex eius magnam? Aperiam illum nam cupiditate omnis. Repudiandae doloribus voluptatibus, animi quas incidunt eveniet fugiat!
</p>
Bạn có thể sử dụng thuộc tính CSS text-indent để thụt lề dòng đầu tiên một độ dài cụ thể:
p.indent {
text-indent: 30px;
}Và đây là những gì sẽ trông như thế nào:
Giống như các thuộc tính độ dài CSS khác, bạn có thể sử dụng bất kỳ đơn vị nào bạn muốn cho việc này. Các đơn vị pixel (px), em, rem, chẵn (%) sẽ hoạt động.
Việc sử dụng một đơn vị tương đối như tỷ lệ phần trăm sẽ thay đổi số lượng thụt lề dựa trên chiều rộng của trang web. Trang web càng rộng thì thụt lề càng lớn.
Bạn thậm chí có thể thêm text-indent phủ định giá trị nếu bạn muốn, để làm cho dòng đầu tiên nhô ra bên trái.
p.indent {
text-indent: -30px;
}Đây là những gì mà thụt lề phủ định sẽ trông như thế nào trong một đoạn văn:
Sử dụng margin-left nếu bạn muốn toàn bộ đoạn văn được chuyển sang bên phải
Nếu bạn muốn toàn bộ đoạn văn được chuyển qua, không chỉ dòng đầu tiên, thì bạn có thể sử dụng margin-left tài sản.
p.shifted {
margin-left: 30px;
}Đây là những gì nó sẽ trông như thế nào. Đoạn đầu tiên không được chuyển qua và đoạn thứ hai là:
