Trong HTML nếu bạn nhập dấu cách bao nhiêu lần hoặc sử dụng Tab phím để tạo nhiều khoảng trống cho văn bản thì kết quả vẫn sẽ hiển thị một dấu cách. Vì vậy ở bài viết này tôi sẽ hướng dẫn các bạn cách làm thế nào để tạo ra nhiều khoảng trống trong HTML
Để có một khoảng trống thông thường, chúng ta chỉ cần nhấn phím Space là xong. Vấn đề ở đây là từ hai phím cách trở lên thì sao ạ?
Bạn cũng có thể nhập mã số để thay thế đây thực chất là dấu cách trong hội chuẩn. Bạn có thể nhập mã để tránh gây ra lỗi khi sử dụng ở các trình duyệt khác nhau
Nếu có nhiều khoảng trống mà bạn muốn chèn vào thì bạn không thể sử dụng hay đơn thuần nhiều lần như vậy sẽ gây rắc rối và đôi khi việc tìm kiếm mã lỗi sẽ mất rất nhiều thời gian. Vì vậy thay vì sử dụng 2 lần thì bạn có thể thay thế bằng hoặc sử dụng 4 lần bạn có thể thay thế bằng để rút gọn đoạn mã hiển thị trong HTML
Trên đây là cách bạn chèn khoảng trống trong HTML. Đơn giản thật phải không các bạn?
Để bật tính năng nhắn tin trên trang Facebook của bạn, hãy truy cập Trang .tab { tab-size: 2; } 06 của bạn. Trong hàng .tab { tab-size: 2; } 07, hãy chọn Cho phép mọi người liên hệ riêng với Trang của tôi bằng cách hiển thị nút Tin nhắn (Direct Link. .tab { tab-size: 2; } 08)
Làm cách nào để chèn khoảng trắng/tab vào văn bản bằng HTML/CSS?
Cải thiện bài viết
Lưu bài viết
Thích bài viết
- Độ khó. Dễ dàng
- Cập nhật lần cuối. 30 tháng 7 năm 2021
Cải thiện bài viết
Lưu bài viết
Khoảng cách có thể được thêm bằng cách sử dụng HTML và CSS theo 3 cách tiếp cận
Phương pháp 1. Sử dụng các ký tự đặc biệt được chỉ định cho các không gian khác nhau
Thực thể ký tự được sử dụng để biểu thị một khoảng trắng không ngắt là một khoảng trắng cố định. Điều này có thể được coi là gấp đôi không gian của một không gian bình thường. Nó được sử dụng để tạo một khoảng trắng trong một dòng mà không thể ngắt quãng bằng cách ngắt từ
Thực thể ký tự được sử dụng để biểu thị khoảng trắng 'en' có nghĩa là kích thước nửa điểm của phông chữ hiện tại. Điều này có thể được coi là gấp đôi không gian của một không gian bình thường
Thực thể ký tự được sử dụng để biểu thị khoảng trắng 'em' có nghĩa là bằng kích thước điểm của phông chữ hiện tại. Điều này có thể được coi là gấp bốn lần không gian của một không gian bình thường
cú pháp
Regular space: Two spaces gap:   Four spaces gap:  Thí dụ
.tab { tab-size: 2; } 09
.tab { tab-size: 2; } 10.tab { tab-size: 2; } 11.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 10.tab { tab-size: 2; } 14.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 0____110.tab { tab-size: 2; } 2.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 4.tab { tab-size: 2; } 5
.tab { tab-size: 2; } 0____17.tab { tab-size: 2; } 2____112
.tab { tab-size: 2; } 7____114.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 10.tab { display: inline-block; margin-left: 40px; } 4.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 0______110.tab { display: inline-block; margin-left: 40px; } 8 .tab { display: inline-block; margin-left: 40px; } 9.tab { tab-size: 2; } 090.tab { tab-size: 2; } 091.tab { tab-size: 2; } 092.tab { display: inline-block; margin-left: 40px; } 8.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 0____110.tab { tab-size: 2; } 097.tab { tab-size: 2; } 098.tab { tab-size: 2; } 097.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 101
.tab { tab-size: 2; } 0____110.tab { tab-size: 2; } 104.tab { tab-size: 2; } 105.tab { tab-size: 2; } 104.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 0____110.tab { tab-size: 2; } 104.tab { tab-size: 2; } 111.tab { tab-size: 2; } 104.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 0____110.tab { tab-size: 2; } 104.tab { tab-size: 2; } 117.tab { tab-size: 2; } 104.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 7____94.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 7____111.tab { tab-size: 2; } 12
Trong đoạn mã trên, mã dấu cách thông thường và mã hai dấu cách và bốn dấu cách không hiển thị, vì vậy đây là giao diện của nó
đầu ra
Phương pháp 2. Sử dụng thuộc tính kích thước tab để đặt khoảng cách cho các ký tự tab
The tab-size CSS property is set the number of spaces each tab character will display. Changing this value allows inserting the needed amount of space on one tab character. This method however only works with pre-formatted text (using tags).
Ký tự tab có thể được chèn bằng cách giữ Alt và nhấn 0 và 9 cùng nhau
cú pháp
.tab { tab-size: 2; }Thí dụ
.tab { tab-size: 2; } 09
.tab { tab-size: 2; } 10.tab { tab-size: 2; } 11.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 10.tab { tab-size: 2; } 14.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 0____110.tab { tab-size: 2; } 2.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 4.tab { tab-size: 2; } 5
.tab { tab-size: 2; } 0____17.tab { tab-size: 2; } 2____112
.tab { tab-size: 2; } 0.tab { tab-size: 2; } 10.tab { display: inline-block; margin-left: 40px; } 9.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 4.tab { tab-size: 2; } 148
.tab { tab-size: 2; } 149.tab { tab-size: 2; } 120
.tab { tab-size: 2; } 4.tab { tab-size: 2; } 122
.tab { tab-size: 2; } 123
.tab { tab-size: 2; } 4.tab { tab-size: 2; } 125
.tab { tab-size: 2; } 149.tab { tab-size: 2; } 127
.tab { tab-size: 2; } 4.tab { tab-size: 2; } 122
.tab { tab-size: 2; } 123
.tab { tab-size: 2; } 4.tab { tab-size: 2; } 02
.tab { tab-size: 2; } 149.tab { tab-size: 2; } 04
.tab { tab-size: 2; } 4.tab { tab-size: 2; } 122
.tab { tab-size: 2; } 0____17____99____112
.tab { tab-size: 2; } 7____114.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 10.tab { display: inline-block; margin-left: 40px; } 4.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 0______110.tab { display: inline-block; margin-left: 40px; } 8 .tab { display: inline-block; margin-left: 40px; } 9.tab { tab-size: 2; } 090.tab { tab-size: 2; } 091.tab { tab-size: 2; } 092.tab { display: inline-block; margin-left: 40px; } 8.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 0____110.tab { tab-size: 2; } 097.tab { tab-size: 2; } 098.tab { tab-size: 2; } 097.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 101
.tab { tab-size: 2; } 0______110.tab { tab-size: 2; } 35 .tab { tab-size: 2; } 36.tab { tab-size: 2; } 090.tab { tab-size: 2; } 38.tab { tab-size: 2; } 39.tab { tab-size: 2; } 35.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 0______110.tab { tab-size: 2; } 35 .tab { tab-size: 2; } 36.tab { tab-size: 2; } 090.tab { tab-size: 2; } 47.tab { tab-size: 2; } 48.tab { tab-size: 2; } 35.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 0______110.tab { tab-size: 2; } 35 .tab { tab-size: 2; } 36.tab { tab-size: 2; } 090.tab { tab-size: 2; } 56.tab { tab-size: 2; } 57.tab { tab-size: 2; } 35.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 7____94.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 7____111.tab { tab-size: 2; } 12
đầu ra
Phương pháp 3. Tạo một lớp mới cho khoảng cách bằng CSS
Một lớp mới có thể được tạo để cung cấp một khoảng cách nhất định bằng cách sử dụng thuộc tính lề trái. Lượng không gian có thể được cung cấp bởi số pixel được chỉ định trong thuộc tính này
Thuộc tính hiển thị cũng được đặt thành 'khối nội tuyến' để không thêm ngắt dòng sau phần tử. Điều này cho phép không gian nằm bên cạnh văn bản và các yếu tố khác
cú pháp
.tab { display: inline-block; margin-left: 40px; }Thí dụ
.tab { tab-size: 2; } 09
.tab { tab-size: 2; } 10.tab { tab-size: 2; } 11.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 10.tab { tab-size: 2; } 14.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 0____110.tab { tab-size: 2; } 2.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 4.tab { tab-size: 2; } 5
.tab { tab-size: 2; } 0____17.tab { tab-size: 2; } 2____112
.tab { tab-size: 2; } 0.tab { tab-size: 2; } 10.tab { display: inline-block; margin-left: 40px; } 9.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 4.tab { tab-size: 2; } 88
.tab { tab-size: 2; } 149.tab { tab-size: 2; } 90
.tab { tab-size: 2; } 149.tab { tab-size: 2; } 92
.tab { tab-size: 2; } 4.tab { tab-size: 2; } 122
.tab { tab-size: 2; } 0____17____99____112
.tab { tab-size: 2; } 7____114.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 10.tab { display: inline-block; margin-left: 40px; } 4.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 0______110.tab { display: inline-block; margin-left: 40px; } 8 .tab { display: inline-block; margin-left: 40px; } 9.tab { tab-size: 2; } 090.tab { tab-size: 2; } 091.tab { tab-size: 2; } 092.tab { display: inline-block; margin-left: 40px; } 8.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 0____110.tab { tab-size: 2; } 097.tab { tab-size: 2; } 098.tab { tab-size: 2; } 097.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 101
.tab { tab-size: 2; } 0______110.tab { tab-size: 2; } 104.tab { display: inline-block; margin-left: 40px; } 24.tab { display: inline-block; margin-left: 40px; } 25 .tab { tab-size: 2; } 36.tab { tab-size: 2; } 090.tab { display: inline-block; margin-left: 40px; } 28.tab { display: inline-block; margin-left: 40px; } 29.tab { display: inline-block; margin-left: 40px; } 25.tab { display: inline-block; margin-left: 40px; } 31.tab { tab-size: 2; } 104.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 7____94.tab { tab-size: 2; } 12
.tab { tab-size: 2; } 7____111.tab { tab-size: 2; } 12
đầu ra
HTML là nền tảng của các trang web, được sử dụng để phát triển trang web bằng cách cấu trúc các trang web và ứng dụng web. Bạn có thể học HTML từ đầu bằng cách làm theo Hướng dẫn HTML và Ví dụ về HTML này
CSS là nền tảng của các trang web, được sử dụng để phát triển trang web bằng cách tạo kiểu trang web và ứng dụng web. Bạn có thể học CSS từ đầu bằng cách làm theo Hướng dẫn CSS và Ví dụ về CSS này