Tìm hiểu cách chèn nhiều khoảng trắng liên tiếp trong HTML, cách thêm dấu ngắt giữa các dòng và cách dễ dàng thêm khoảng trắng bằng CSS.

Bạn đang xem : mã html cho không gian dòng

Trong khi HTML có xu hướng là một ngôn ngữ khá trực quan để tiếp nhận, đôi khi nó hoạt động theo những cách mà người mới bắt đầu có thể không mong đợi. Ví dụ: làm cách nào để bạn thêm nhiều hơn một khoảng trắng giữa hai từ hoặc ký tự trong HTML?

Chỉ cần tiếp tục nhấn phím cách và bạn đã hoàn tất! Cảm ơn vì đã đọc.

Tải xuống ngay: Hack HTML & amp; CSS miễn phí < / span>

Chỉ đùa thôi, còn nhiều điều hơn thế nữa. Nếu bạn muốn thêm nhiều dấu cách liền kề trong HTML, việc nhấn liên tục vào phím cách sẽ không hoạt động như trong tài liệu văn bản thuần túy. Nếu bạn thực hiện điều này trong HTML, trình duyệt sẽ thu hẹp các khoảng trống mà bạn thêm xuống chỉ còn một:

Xem Bút pháp Ví dụ thu gọn khoảng trắng của Christina Perricone ( @hubspot ) trên CodePen .

Hành vi này được gọi là thu gọn khoảng trắng – các trình duyệt sẽ hiển thị nhiều không gian HTML dưới dạng một khoảng trắng và cũng sẽ bỏ qua các khoảng trắng trước và sau các phần tử và bên ngoài các phần tử.

Mặc dù quy tắc này đôi khi không thuận tiện, nhưng có một số cách giải quyết mà các lập trình viên HTML mới bắt đầu nên biết. Trong bài đăng này, chúng tôi sẽ chỉ cho bạn bốn cách nhanh chóng để thêm khoảng trắng trong tài liệu HTML của bạn, cùng với một số mẹo về cách thêm khoảng cách bằng CSS.

Tài nguyên Nổi bật

Hướng dẫn dành cho Người mới bắt đầu về HTML

Điền vào biểu mẫu để được giới thiệu về các phương pháp hay nhất về HTML.

Cách Chèn Khoảng trắng trong HTML

HTML xử lý nội dung của một trang web. Nếu nội dung của bạn cần thêm khoảng cách để có ý nghĩa, bạn có thể thử bất kỳ phương pháp nào bên dưới.

Tuy nhiên, nếu bạn muốn thêm không gian cho mục đích tạo kiểu (ví dụ: khoảng trắng giữa các phần tử), chúng tôi khuyên bạn nên sử dụng CSS thay thế – chuyển sang phần tiếp theo để tìm hiểu cách thực hiện .

HTML Non-Break Space (& amp; nbsp;)

Cách đơn giản nhất để thêm dấu cách trong HTML (ngoài việc nhấn phím cách) là sử dụng thực thể không ngắt, được viết là & amp; nbsp; hoặc & amp; # 160; < / strong>. Trình duyệt sẽ không thu gọn nhiều khoảng trắng liền kề, cho phép bạn “buộc” một số khoảng trắng hiển thị giữa các từ hoặc các phần tử trang khác.

Xem Pen HTML Space: nbsp example của Christina Perricone ( @hubspot ) trên CodePen .

Khi được hiển thị trong trình duyệt, một không gian không ngắt sẽ giống như một không gian bình thường. Sự khác biệt duy nhất là khoảng trắng này sẽ không bao giờ ngắt thành một dòng mới – hai từ hoặc phần tử được phân tách bằng & amp; nbsp; sẽ luôn xuất hiện trên cùng một dòng. Điều này rất hữu ích nếu việc tách hai đoạn văn bản sẽ gây nhầm lẫn cho người đọc, chẳng hạn như trong trường hợp “9:00 AM” hoặc “1 000 000.”

Xem Thêm  Cách sử dụng CSS thuần túy để tạo hoạt ảnh tải đẹp cho ứng dụng của bạn - cách tạo hoạt ảnh tải trong css

Cuối cùng, bạn có thể sử dụng các thực thể HTML bổ sung & amp; ensp; & amp; emsp; để thêm hai và bốn dấu cách không ngắt tương ứng:

Xem Pen HTML Space: ensp and emsp example của Christina Perricone ( @hubspot ) trên CodePen . < / p>

Mặc dù & amp; nbsp; có thể hữu ích, nhưng bạn không nên sử dụng nó quá mức vì việc tránh ngắt dòng có thể gây ra sự cố khi hiển thị nội dung trong trình duyệt. Ngoài ra, hãy tránh sử dụng khoảng trắng không ngắt vì lý do tạo kiểu, chẳng hạn như thụt lề hoặc căn giữa một phần tử trên trang – việc tạo kiểu phải được xử lý bằng CSS.

Bạn muốn tìm hiểu thêm về HTML? Tải xuống hướng dẫn miễn phí của chúng tôi để biết các phương pháp hay nhất để bắt đầu với HTML.

Thẻ văn bản định dạng sẵn HTML (& lt; pre & gt;)

Một cách khác để ngăn không gian HTML của bạn bị thu gọn là định dạng trước văn bản HTML của bạn, định dạng này giữ lại tất cả các khoảng trắng và ngắt dòng trong HTML của bạn. Khi HTML được hiển thị trong trình duyệt, văn bản sẽ giống như trong tệp HTML. Định dạng trước rất hữu ích cho nội dung văn bản có thành phần hình ảnh, như thơ hoặc nghệ thuật ASCII.

Để định dạng trước văn bản của bạn, hãy đặt nó bên trong thẻ & lt; pre & gt; :

Xem Pen HTML Space: pre example của Christina Perricone ( @hubspot ) trên CodePen .

Lưu ý rằng các trình duyệt web áp dụng phông chữ monospaced cho văn bản bên trong thẻ & lt; pre & gt; , nhưng bạn có thể dễ dàng ghi đè phông chữ này bằng phông chữ CSS – tài sản của gia đình .

Thẻ

HTML Break (& lt; br & gt;)

Nếu bạn muốn ngăn ngắt dòng giữa hai từ, hãy sử dụng dấu cách không ngắt. Nếu bạn muốn chèn dấu ngắt dòng, hãy sử dụng thẻ ngắt dòng HTML, được viết là & lt; br & gt; . Bạn không cần thẻ đóng ở đây – chỉ cần viết & lt; br & gt; thêm dấu ngắt dòng.

Thẻ ngắt dòng hữu ích cho các trường hợp cần ngắt dòng để hiểu nội dung nhưng bạn không muốn nhất thiết phải sử dụng một phần tử đoạn mới, chẳng hạn như trong địa chỉ:

Xem Pen HTML Space: br example của Christina Perricone ( @hubspot ) trên CodePen .

Thẻ ngắt có nghĩa là cho các ngắt dòng đơn và không nhiều hơn một trong một hàng. Nếu bạn muốn thêm khoảng trắng thừa giữa các phần văn bản, hãy sử dụng CSS padding và margin để thay thế cho mã rõ ràng hơn. Hoặc, bạn có thể sử dụng thẻ & lt; p & gt; HTML như chúng ta sẽ thấy ở phần tiếp theo.

Thẻ

Đoạn văn HTML (& lt; p & gt;)

Phần tử & lt; p & gt; là một trong những phần tử đầu tiên bạn sẽ học khi mới bắt đầu và vì lý do chính đáng. Thẻ & lt; p & gt; biểu thị một đoạn văn trong HTML, vì vậy, nó hiển thị ở mọi nơi.

Xem Thêm  SQL tháng hiện tại - cách lấy tháng bằng sql

& lt; p & gt; là phần tử cấp khối, có nghĩa là (1) chiều rộng mặc định của nó được đặt thành chiều rộng của toàn bộ trang và (2) có dấu ngắt dòng trước và sau phần tử khối. Với & lt; p & gt; , các trình duyệt sẽ thêm một số khoảng trắng bổ sung với dấu ngắt dòng này để làm cho các đoạn liên tiếp dễ đọc hơn, vì vậy nó có thể được sử dụng bất cứ lúc nào bạn đang sử dụng các khối văn bản khác biệt với nhau .

Xem Pen HTML Space: p example của Christina Perricone ( @hubspot ) trên CodePen .

Phần tử & lt; p & gt; cũng có lợi ích là phần tử HTML ngữ nghĩa . Điều này có nghĩa là bản thân thẻ cho biết phần tử thực hiện chức năng gì (tức là thẻ đoạn biểu thị một đoạn văn bản), làm cho nội dung của bạn dễ tiếp cận hơn với các công nghệ hỗ trợ và giúp các công cụ tìm kiếm lập chỉ mục trang web của bạn tốt hơn.

Cách chèn khoảng trắng trong CSS

Để đặt các khoảng trắng liên quan nhiều đến kiểu dáng trang của bạn hơn là nội dung, hãy sử dụng Trang tính kiểu xếp tầng (CSS) . Với CSS, bạn có thể áp dụng và thay đổi các quy tắc tạo kiểu trên toàn trang và toàn trang chỉ với một hoặc hai thay đổi quy tắc nhỏ, thay vì thay đổi từng trường hợp trong HTML của bạn – chỉ cần đảm bảo rằng bạn thêm CSS bên ngoài .

Dưới đây là một số cách sử dụng CSS hữu ích để thêm khoảng cách giữa các nội dung của bạn.

thụt lề văn bản CSS

Nếu bạn muốn đặt thụt lề trên dòng đầu tiên của phần tử khối như & lt; p & gt; , hãy sử dụng thuộc tính CSS text-indent . Ví dụ: để thêm khoảng cách thụt lề trong 4 dấu cách, hãy áp dụng quy tắc text-indent: 4em; cho phần tử. Bạn cũng có thể sử dụng một đơn vị độ dài khác như px hoặc cm hoặc đặt thụt lề dưới dạng phần trăm chiều rộng trang:

Xem Pen HTML Space: text-indent example của Christina Perricone ( @hubspot ) trên CodePen . < / p>

Bằng cách sử dụng kỹ thuật này, bạn có thể nhanh chóng kéo dài hoặc rút ngắn tất cả các thụt lề của mình bằng cách thay đổi giá trị của text-indent . Điều này dễ dàng hơn nhiều so với việc thêm hoặc xóa nhiều bản sao của & amp; nbsp; cho mỗi đoạn được thụt lề.

Căn chỉnh văn bản CSS

Thay vì sử dụng khoảng trắng HTML để căn chỉnh văn bản của bạn theo một cách nhất định, hãy chọn giải pháp gọn gàng hơn nhiều của target CS Thuộc tính căn chỉnh văn bản . Với thuộc tính này, bạn có thể căn chỉnh văn bản bên trong một phần tử khối sang trái hoặc phải, cũng như căn giữa hoặc căn đều văn bản.

Xem Pen HTML Space: text-align example của Christina Perricone ( @hubspot ) trên CodePen . < / p>

Lề và đệm

Mọi phần tử HTML đều có thể được cung cấp lề và đệm, như được minh họa bằng mô hình hộp CSS :

Để thêm khoảng trắng bên ngoài đường viền của phần tử, chúng tôi có thể điều chỉnh giá trị margin của nó trong CSS. Đối với khoảng cách bên trong đường viền, chúng ta có thể thay đổi giá trị padding của nó để có hiệu ứng tương tự. Cả hai đều được minh họa dưới đây:

Xem Thêm  Vòng lặp qua một mảng trong C ++ - cpp cho mảng vòng lặp

Xem Bút ký HTML Space: margin and padding của Christina Perricone ( @hubspot ) trên CodePen .

Thêm Khoảng trắng bổ sung trong HTML

Đôi khi, việc thu gọn khoảng trắng có thể hơi khó chịu. May mắn thay, có một số cách để giải quyết vấn đề này và việc biết yếu tố hoặc quy tắc tốt nhất cho từng trường hợp sẽ rất hữu ích khi bạn bắt đầu tự mình xây dựng các trang web đầy đủ.

Một lời nhắc cuối cùng, hãy đảm bảo sử dụng thủ thuật khoảng trắng HTML cho nội dung của bạn (ví dụ: khoảng trắng giữa các từ hoặc các dòng đơn) và CSS để tạo kiểu cho mọi thứ khác.

Gọi hành động mới


Xem thêm những thông tin liên quan đến chủ đề mã html cho một không gian dòng

Thực hành Code giao diện Website đơn giản bằng HTML và CSS

alt

  • Tác giả: Quang Chiến
  • Ngày đăng: 2020-04-05
  • Đánh giá: 4 ⭐ ( 7129 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thực hành Code giao diện Website đơn giản bằng HTML và CSS

    ♥ Mua giày Sneaker tại Website: https://qcshop.vn
    ♥ Ảnh và file PSD: https://drive.google.com/file/d/1NQRuFvub2RTR6A4XlFpevnpPMM-W3Zgl/view?usp=sharing
    ♥Download code please inbox for me via Zalo: 0352860701

    Liên hệ với mình tại :
    ♥ Gmail: quangchien01.it@gmail.com
    ▲ Đây là kênh youtube của mình: https://goo.gl/Ny4uMJ

Hướng dẫn nhanh để tạo không gian trong HTML

  • Tác giả: www.greelane.com
  • Đánh giá: 5 ⭐ ( 8375 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ không gian HTML không tồn tại, nhưng có những cách khác để tạo và kiểm soát không gian trên các trang web của bạn.

Hướng dẫn tạo khoảng cách dòng trong HTML mới nhất 2022

  • Tác giả: atpweb.vn
  • Đánh giá: 5 ⭐ ( 2435 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tạo khoảng cách dòng trong HTML là một trong những từ khóa được search nhiều nhất trên google về chủ đề tạo khoảng cách trong html. Trong bài content này, ATP Web sẽ viết bài Hướng dẫn tạo khoảng cách dòng trong HTML mới nhất 2022.

Các thẻ đoạn văn trong HTML

  • Tác giả: timoday.edu.vn
  • Đánh giá: 5 ⭐ ( 3049 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ đoạn văn giúp trình duyệt xác định được đoạn văn bản trong trang HTML. Trong bài này các bạn sẽ làm quen các thẻ , ,

Làm thế nào để làm cho một div lấp đầy một không gian ngang còn lại?

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 8718 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Điều này dường như để thực hiện những gì bạn đang đi. #left { float:left; width:180px;…

Thẻ xuống dòng br trong HTML

  • Tác giả: freehost.page
  • Đánh giá: 3 ⭐ ( 5934 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Mã & Biểu tượng ký tự HTML

  • Tác giả: www.rapidtables.org
  • Đánh giá: 3 ⭐ ( 8944 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mã ký tự và ký hiệu HTML.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php