Hướng dẫn how to add line space in html - cách thêm khoảng cách dòng trong html

Cập nhật: 07/31/2022 bởi07/31/2022 by

Tạo thêm không gian trống hoặc khoảng trắng, trong HTML của bạn trên trang web của bạn có thể đạt được theo nhiều cách tùy thuộc vào không gian bạn muốn tạo. Các phần sau đây chứa các cách khác nhau để tạo thêm không gian bằng cả HTML và CSS trong trình chỉnh sửa HTML như Dreamweaver hoặc trình chỉnh sửa văn bản như Notepad.

Tạo thêm không gian trước hoặc sau văn bản

Một trong những điều khó hiểu nhất đối với người dùng mới, những người đang tạo một trang web là họ không thể nhấn phím cách nhiều lần để tạo thêm không gian. Để tạo thêm không gian trước, sau hoặc ở giữa văn bản của bạn, hãy sử dụng & nbsp; (không gian không phá vỡ) ký tự HTML mở rộng.  (non-breaking space) extended HTML character.

Ví dụ: với không gian "Extra & nbsp; & nbsp; bằng cách sử dụng không gian kép, chúng tôi có mã sau trong HTML của chúng tôi.

extra    space

Ghi chú

Nếu bạn đang sử dụng trình soạn thảo WYSIWYG để nhập mã ở trên, bạn phải ở trong tab HTML hoặc chỉnh sửa mã HTML.

Tiếp tục khoảng cách trong văn bản được dán vào một trang

Nếu bạn đang dán văn bản với các không gian hoặc tab thêm, bạn có thể sử dụng thẻ HTML để giữ cho văn bản được định dạng. Dưới đây là một ví dụ về cách dán văn bản với các không gian thêm bằng cách sử dụng thẻ.

This    text   has    lots of     spaces

Ví dụ trên được thực hiện bằng cách sử dụng mã HTML dưới đây.

<pre class="tab">This    text      has    lots of     spaces</pre>

• Xem trang thẻ HTML của chúng tôi để biết thêm thông tin về thẻ này.

Ghi chú

Nếu bạn đang sử dụng trình soạn thảo WYSIWYG để nhập mã ở trên, bạn phải ở trong tab HTML hoặc chỉnh sửa mã HTML.

Tiếp tục khoảng cách trong văn bản được dán vào một trang

Nếu bạn đang dán văn bản với các không gian hoặc tab thêm, bạn có thể sử dụng thẻ HTML để giữ cho văn bản được định dạng. Dưới đây là một ví dụ về cách dán văn bản với các không gian thêm bằng cách sử dụng thẻ.

Ví dụ trên được thực hiện bằng cách sử dụng mã HTML dưới đây.

Xem trang thẻ HTML của chúng tôi để biết thêm thông tin về thẻ này.

Tạo thêm không gian xung quanh một phần tử hoặc đối tượng

<p style="margin-left: 2.5em;padding: 0 7em 2em 0;border-width: 2px; border-color: black; border-style:solid;">Example of a paragraph with margin and padding.</p>

Bất kỳ phần tử HTML nào cũng có thể có khoảng cách bổ sung được thêm vào đỉnh, phải, dưới hoặc bên trái. Tuy nhiên, hãy chắc chắn rằng bạn hiểu sự khác biệt giữa lề và đệm trước khi quyết định loại không gian bạn muốn thêm xung quanh phần tử hoặc đối tượng. Như đã thấy trong hình dưới đây, phần đệm bao quanh phần tử, trong biên giới và lề bên ngoài biên giới.

Ví dụ dưới đây cho thấy đoạn của chúng tôi được bao quanh bởi một đường viền, thụt vào với một lề và với khoảng cách ở bên phải và dưới cùng.

Một ví dụ về một đoạn văn với lề và đệm.

.tab {
 margin-left: 2.5em
}

Ví dụ trên được tạo bằng cách sử dụng mã dưới đây.

Trong phần đầu tiên của mã, "lề-bên trái: 2.5EM;" Thêm một biên độ bên trái là 2,5 em, mang lại sự xuất hiện của văn bản thụt lề. Như được hiển thị trong ví dụ, khoảng cách này nằm ngoài biên giới. Trong phần tiếp theo, "Padding: 0 7em 2em 0;" đang xác định phần đệm trên, phải, dưới và trái (theo chiều kim đồng hồ). Có phần đệm "0" trên cùng ", 7em" đệm bên phải ", 2em" đệm đáy và 0 bên trái. Phần còn lại của ví dụ này là xác định cách biên giới nên nhìn.

<p style="margin-left:2.5em">An example of a 5em left margin.</p>

Tạo một tab bằng CSS và HTML

• Một tab có thể được tạo trong HTML bằng cách điều chỉnh lề trái của một phần tử. Ví dụ, đoạn này có biên độ bên trái là 2,5 em từ phần tử chứa văn bản. Các CSS để tạo ra lề trái này được hiển thị bên dưới.

Sau khi đặt mã này trong tệp CSS của chúng tôi, chúng tôi có thể áp dụng lớp "tab" cho bất kỳ văn bản nào để tạo sự xuất hiện của một tab. Giá trị của lề trái có thể được tăng hoặc giảm tùy thuộc vào nhu cầu của bạn.

<p>This sentence contains  example text.<br>
<br>
As you can see, two breaks add the space above.</p>

Mặc dù chúng tôi đề xuất phương pháp trên, CSS bên trái cũng có thể được thêm nội tuyến, như được hiển thị trong ví dụ dưới đây.

Một ví dụ về một lề 5em trái.

Cách thụt lề hoặc tab văn bản trên trang web hoặc trong HTML.

Để thêm không gian bên dưới một dòng hoặc đoạn văn bản hoặc đẩy văn bản xuống thấp hơn trên trang một lần, bạn có thể sử dụng thẻ. Dưới đây là một ví dụ về cách kỹ thuật này có thể được áp dụng.

Mã trên tạo văn bản hiển thị dưới đây.

Câu này chứa văn bản ví dụ.

<p style="line-height:3.5em;">Text shown below with extra spacing</p>

Mặc dù chúng tôi đề xuất phương pháp trên, CSS bên trái cũng có thể được thêm nội tuyến, như được hiển thị trong ví dụ dưới đây.

Một ví dụ về một lề 5em trái.

Cách thụt lề hoặc tab văn bản trên trang web hoặc trong HTML.

Thêm khoảng cách xung quanh một hình ảnh

Để thêm không gian xung quanh một hình ảnh, hãy sử dụng CSS.Để đẩy văn bản xuống thấp hơn trên trang, bạn có thể sử dụng thẻ.Dưới đây là ví dụ về cách các kỹ thuật này có thể được áp dụng.

Ví dụ CSS

<html><head>
  <title>Add Space Around An Image</title>
  <style>
  <!--
  img {
    padding:20px; // adds 20 pixels of space around the image.
  }
  -->
  </style>
</head>
<body>
<div id="bodyDiv">
<h3>Add Space Around An Image</h3>
<p>CSS, Image Outside of Paragraph Tags</p>
<p>Some text.</p>
<img src="anonymous.jpg" alt="Anonymous" width="350" height="266"/>
<p>Some text.</p>
</body>
</html>

Ví dụ với thẻ

<html><head>
  <title>Add Space Around An Image</title>
  <style>
  <!--
  img { border: 1px black solid; }
  -->
</style>
</head>
<body>
<div id="bodyDiv">
<h3>Add Space Around An Image</h3>
<p>Image Inside of Paragraph Tags, text squishes around image.</p>
<p>Some text.
<img src="anonymous.jpg" alt="Anonymous" width="350" height="266"/>
Some text.</p>
</body>
</html>

This    text   has    lots of     spaces