Khi viết HTML, bạn sẽ nhận ra: khoảng trắng thêm do bấm Spacebar không hiển thị khi text render trên trình duyệt.
Ví dụ:
<p>April is the cruelest month,</p> <p>April is the cruelest month,</p>
Trong thẻ <p> đầu: chỉ 1 space giữa các từ. Thứ 2: 3 space giữa các từ. Dù sao, cả hai render giống hệt:
April is the cruelest month, April is the cruelest month,
Bài này thảo luận 3 giải pháp thêm khoảng trống vào HTML.
Thẻ HTML thêm khoảng trống
Ký tự HTML Non-Breaking Space ( )
Để tạo khoảng trống trước, giữa, sau text, dùng non-breaking space: . Ví dụ triển khai:
<p>i carry your heart with me(i carry it in my heart)</p> <p>i carry your heart with me(i carry it in my heart)</p>
Kết quả render:
i carry your heart with me(i carry it in my heart)
i carry your heart with me(i carry it in my heart)
81% người tham gia cảm thấy tự tin hơn về cơ hội việc làm tech sau bootcamp. Được match bootcamp ngay hôm nay.
Trung bình bootcamp grad mất dưới 6 tháng chuyển nghề, từ bắt đầu bootcamp đến việc đầu tiên.
Element Preformatted Text ()
Thẻ <pre> dùng cho preformatted text. Giữ nguyên spacing, line break, hiển thị font fixed-width. Ví dụ:
<p>I was a child and she was a child, In this kingdom by the sea, But we loved with a love that was more than love— I and my Annabel Lee—</p> <pre>I was a child and she was a child, In this kingdom by the sea, But we loved with a love that was more than love— I and my Annabel Lee—</pre>
Kết quả render:
I was a child and she was a child, In this kingdom by the sea, But we loved with a love that was more than love— I and my Annabel Lee—
I was a child and she was a child,
In this kingdom by the sea,
But we loved with a love that was more than love—
I and my Annabel Lee—
Ngắt dòng (Line Break -
)
Muốn thêm khoảng trống giữa các dòng text, thẻ line break <br> phù hợp nhất. Ví dụ:
<p>so much depends upon a red wheel barrow glazed with rain water beside the white chickens</p> <p>so much depends<br> upon<br> <br> a red wheel<br> barrow<br> <br> glazed with rain<br> water<br> <br> beside the white<br> chickens</p>
Kết quả render:
Kết luận
Tóm lại, đã học 3 cách thêm khoảng trống dùng thẻ HTML. Nếu mới học HTML, xem hướng dẫn: Learn HTML: A Guide to Learning Hypertext Markup Language, hoặc đọc How Long Does It Take to Learn HTML?