Cần thụt lề văn bản trong element HTML? Bạn có thể thụt lề dòng đầu tiên của đoạn văn bằng CSS!
Cách làm như sau:
Thụt lề dòng đầu đoạn văn với text-indent
Giả sử bạn có văn bản trong đoạn như sau:
<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>Dùng thuộc tính CSS text-indent để thụt lề dòng đầu một độ dài cụ thể:
p.indent { text-indent: 30px; }Kết quả:
Giống các thuộc tính độ dài CSS khác, bạn có thể dùng bất kỳ đơn vị nào: pixel (px), em, rem, thậm chí phần trăm (%).
Dùng đơn vị tương đối như phần trăm sẽ thay đổi độ thụt dựa trên width trang. Trang càng rộng, thụt càng lớn.
Bạn thậm chí có thể dùng text-indent âm, để dòng đầu lồi ra bên trái.
p.indent { text-indent: -30px; }Kết quả thụt lề âm:
Dùng margin-left nếu muốn cả đoạn dịch sang phải
Nếu muốn cả đoạn văn dịch sang phải, không chỉ dòng đầu, dùng margin-left.
p.shifted { margin-left: 30px; }Kết quả: đoạn đầu không dịch, đoạn thứ hai dịch:
