Không gian tab thay vì nhiều khoảng trắng không ngắt (“ ”)?

Khong Gian Tab Thay Vi Nhieu Khoang Trang Khong Ngat Nbsp



Trong quá trình phát triển web, các khoảng trống được thêm vào trong tài liệu HTML bằng cách sử dụng “   ” mã thực thể còn được gọi là không gian không phá vỡ. Trong một số trường hợp, cần phải thêm nhiều khoảng trắng không ngắt trong tài liệu, chẳng hạn như khoảng cách tab. Do đó, nhiều “ ” mã thực thể có thể ảnh hưởng đến trình tự mã và độ gọn gàng của tài liệu.

Để giải quyết những vấn đề này, có một số cách khác để bao gồm nhiều khoảng trắng không ngắt trong tài liệu HTML, chẳng hạn như “ ”, “ ” phần tử, CSS “ lề trái ”, “ đệm-trái ” tài sản, và nhiều hơn nữa.

Nghiên cứu này sẽ dạy cho bạn:







Đầu tiên, chúng ta sẽ xem qua một ví dụ triển khai “   ” để thêm khoảng trắng vào tài liệu HTML. Sau đó, dần dần xem qua các hình minh họa để trình bày các phương pháp khác nhau để thêm không gian tab.



Cách thêm khoảng trắng bằng cách sử dụng “ ” mã thực thể trong HTML?

Để thêm dấu cách sử dụng “   ” trên trang HTML, hãy làm theo các bước được cung cấp:



  • Thêm một phần tử div và gán cho nó một lớp “ mạo từ ”.
  • Sau đó, đặt một “

    ” phần tử cho tiêu đề.

  • Sau đó, thêm “

    ” phần tử để thêm một đoạn văn. Ở đầu đoạn văn, các khoảng trắng được thêm vào bằng cách chỉ ra mã thực thể “   ”:

< div lớp = 'mạo từ' >
< h2 > Kiên thức là sức mạnh < / h2 >
< P >     Kiến thức là sức mạnh có nghĩa là một người đàn ông có học thức có toàn quyền kiểm soát cuộc sống của mình thông qua sức mạnh của kiến ​​thức. < / P >
< / div >

Có thể thấy rằng các khoảng trắng đã được thêm thành công vào đầu đoạn văn:





Làm cách nào để thêm không gian tab bằng phần tử HTML “”?

HTML “ ” là một phần tử nội tuyến được sử dụng để đánh dấu một phần của tài liệu. Trong ví dụ đang diễn ra, chúng tôi đã thêm phần tử với “ chuyển hướng ' Tôi. Phần tử này được tạo kiểu trong CSS để tạo khoảng trống:



< div lớp = 'mạo từ' >
< h2 >Kiến thức là sức mạnh< / h2 >
< P >< nhịp Tôi = 'chuyển hướng' >< / nhịp > Kiến thức là sức mạnh có nghĩa là một người đàn ông có học thức có toàn quyền kiểm soát cuộc sống của mình thông qua kiến ​​thức sức mạnh của.


Kiểu div “bài viết”

.mạo từ {
lề: xe hơi;
chiều rộng : 400px;
phần đệm: 10px;
}

Các ' .mạo từ ” được sử dụng để truy cập vào “

” thẻ, sau đó được áp dụng với các thuộc tính sau:

  • chiều rộng ” thuộc tính xác định chiều rộng của phần tử.
  • lề ” thuộc tính xác định chiều cao của phần tử.
  • đệm ” tạo khoảng trống xung quanh nội dung của phần tử.

Id “tab” kiểu

#chuyển hướng {
đệm-trái: 8px;
}

Các ' #chuyển hướng ' Truy cập ' chuyển hướng ” id của phần tử và áp dụng “ đệm-trái ” tài sản trên đó.

đầu ra

Làm cách nào để thêm không gian tab bằng phần tử HTML “
”?

Các ' ” phần tử xác định văn bản được định dạng trước. Văn bản trong phần tử

 được hiển thị trên trang web như vốn có.

Tổng quan về ví dụ bằng cách tạo trang HTML đầu tiên:

  • thêm “

    ” để đặt tiêu đề cấp hai cho tài liệu.

  • Sau đó, thêm “ ” và chỉ định nội dung với định dạng mong muốn:
< h2 >Thẻ trước HTML< / h2 >
< trước >
sản phẩm chức năngChức năng ( p1, p2 ) {
trả lại p1 * p2;
}
< / trước >

đầu ra

Làm cách nào để thêm không gian tab bằng thuộc tính CSS “margin-left”?

Để thêm không gian tab bằng cách sử dụng CSS “ lề trái ” tài sản, hãy làm theo quy trình được cung cấp:

  • Đầu tiên, thêm phần tử div vào tài liệu và gán cho nó một lớp “ hình ảnh ”.
  • Bên trong phần tử div này, thêm hai phần tử div khác cùng với lớp “ hình-1 ' và ' img-2 ' tương ứng.
  • Mỗi phần tử trong số hai phần tử div này chứa các hình ảnh được chỉ định bằng cách sử dụng “ ' nhãn.
  • Này ' ” các thẻ được liên kết với “ src ' và ' chiều rộng ' thuộc tính. Thuộc tính “src” chỉ định URL của hình ảnh và thuộc tính “chiều rộng” điều chỉnh chiều rộng của hình ảnh.

Đây là mã HTML của kịch bản đã thảo luận ở trên:

< div lớp = 'hình ảnh' >
< div lớp = 'img-1' >
< hình ảnh src = '/spring-images/marguerite-flower.jpg' chiều rộng = '250' >
< / div >
< div lớp = 'img-2' >
< hình ảnh src = '/spring-images/flower-ga8f105f1d_1920.jpg' chiều rộng = '250' >
< / div >
< / div >

Trang HTML sẽ trông như thế này:

Hãy chuyển sang phần CSS để thêm nhiều khoảng trắng vào “ img-2 ” mà không sử dụng nhiều khoảng trắng không ngắt.

Kiểu div 'hình ảnh'

.hình ảnh {
chiều rộng : 500px;
ký quỹ: tự động;
}

Các ' .hình ảnh ” được sử dụng để truy cập div HTML có chứa “ hình ảnh ' lớp. Giải thích về các thuộc tính nêu trên như sau:

  • chiều rộng ” thuộc tính xác định chiều rộng của phần tử.
  • lề ” thuộc tính xác định không gian xung quanh các cạnh của phần tử.

Kiểu div “img-2”
Truy cập phần tử div bằng cách sử dụng “ .img-2 ”:

.img- 2 {
lề trái: 30px;
}

Các ' lề trái ” tài sản với một “ 30px ” giá trị được áp dụng cho phần tử div HTML có lớp “ img-2 ”. Thuộc tính này sẽ thêm không gian 30px ở bên trái của phần tử.

Ở đây, kết quả cho thấy rằng hình ảnh thứ hai được áp dụng với một số khoảng trống khi bắt đầu:

Chúng tôi đã xây dựng chi tiết về việc thêm dấu cách tab thay vì sử dụng nhiều dấu cách không ngắt “   ”.

Phần kết luận

Trong HTML, “   ” mã thực thể thường được sử dụng để thêm khoảng trống không ngắt trong tài liệu. Để tránh sử dụng mã thực thể này nhiều lần, có nhiều cách khác để thêm không gian tab vào tài liệu. Các phương pháp này bao gồm việc sử dụng HTML “ ”, “ ” yếu tố,” lề trái ” tài sản, và nhiều hơn nữa. Blog này đã đề cập đến một số cách giúp thêm khoảng cách tab trong tài liệu HTML thay vì thêm nhiều “ ” mã thực thể.