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 : khoảng trắng trong mã html

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.”

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 Thêm  Java If và Java If Else If Câu lệnh với các ví dụ - câu lệnh else if trong java

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 Bút HTML Space: ví dụ trước bởi 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.

& 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 Thêm  Các tham số phương pháp Java - truyền tham số trong java

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 Bút HTML Space: lề và đệm 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 đủ.

Xem Thêm  Cách liên kết nút gửi đến một trang khác trong HTML [Đã cập nhật] - liên kết một nút với một trang html khác

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ủ đề khoảng trắng trong mã html

PHP Code Syntax – How To Embed PHP in HTML

alt

  • Tác giả: PixemWeb
  • Ngày đăng: 2020-07-22
  • Đánh giá: 4 ⭐ ( 3708 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this video I go over PHP Code Syntax and How to embed PHP in an HTML file. I also show you how to use PHP as a standalone file without any HTML.

    Learning the basics of PHP Code Syntax is important since you can prevent a lot of mistakes in your code by following some of the basic rules of PHP.

    Check out this Full Stack Developer Video:
    https://youtu.be/UtDpYVf9jKU

    See What’s On My Desk:
    https://youtu.be/Cw0m3w107Hk

    I cover how white space is handled with PHP along with how case sensitivity works along with file naming conventions for PHP.

    I also share with you various code snippets as examples to help walk you through the process.

    Support the channel by using some of my services, offerings and affiliate links below.

    YouTube Store
    https://www.youtube.com/channel/UCteKLMaAkKld8OURyrbw9fg/store

    Domain Name & Hosting
    https://www.pixemweb.app/

    Music from Epidemic
    https://www.epidemicsound.com/referral/glsayy/

    TubeBuddy Affiliate Link
    https://www.tubebuddy.com/PixemWeb

    My Patreon Page
    https://www.patreon.com/pixemweb

    Learn WordPress Theme Development
    https://www.pixemweb.com/premium-wordpress-themes/

    By using the links above, I might make a few dollars which helps me to dedicate time creating content. I appreciate your support.

    Find me on Instagram:
    https://www.instagram.com/pixemweb/

    Find me on Twitter:
    https://twitter.com/pixemwebdesign

    Find me on Facebook:
    https://www.facebook.com/PixemWeb/

    php code webdevelopment

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

  • Tác giả: hoigi.info
  • Đánh giá: 5 ⭐ ( 3477 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: tạo khoảng cách 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 viết này, hoigi.info

Cách chèn khoảng trống trong HTML

  • Tác giả: ictsharing.com
  • Đánh giá: 4 ⭐ ( 3403 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nhiều bạn tạo blog nhưng không biết cách tạo khoảng cách trong HTML như thế nào? Bài viết hôm nay sẽ hướng dẫn chi tiết cách sử dụng khoảng cách trong HTML

&nbsp là gì? Cách tạo khoảng cách (khoảng trắng) trong html

  • Tác giả: gbaydev.com
  • Đánh giá: 4 ⭐ ( 5152 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: là gì? Cách tạo khoảng trắng (khoảng cách) trong HTML, khi nào sử dụng và không sử dụng. Click để xem ngay nha.

Sóc Thuỷ tinh: Tạo khoảng trắng đầu dòng trong HTML

  • Tác giả: socthuytinh.blogspot.com
  • Đánh giá: 5 ⭐ ( 9514 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Ký Tự Khoảng Trống Đặc Biệt 2022❤️️ Game Alt Html Nhỏ

  • Tác giả: scr.vn
  • Đánh giá: 3 ⭐ ( 3012 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ký Tự Khoảng Trống Đặc Biệt 2022❤️️ Bộ Ứng Dụng Ký Tự Khoảng Trống Mới Nhất 2022 ✅ Cho Game Chuyên Nghiệp Pubg, Free Fire, Liên Quân…

Hướng dẫn cách chèn khoảng trắng trong HTML 2022

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

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