Làm cách nào để bạn đặt ngắt dòng trong không gian trong html?

Tạo thêm khoảng trống hoặc khoảng trắng trong HTML của bạn trên trang web 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 chứa các cách khác nhau để tạo thêm không gian bằng cách sử dụng cả HTML và CSS trong trình soạn thảo HTML như Dreamweaver hoặc trình soạn thảo văn bản như Notepad

• Tạo thêm khoảng trắng trước hoặc sau văn bản
• Giữ khoảng cách trong văn bản được dán vào một trang
• Tạo thêm không gian xung quanh một phần tử hoặc đối tượng
• Tạo tab bằng CSS và HTML
• Thêm khoảng trống bên dưới một dòng hoặc đoạn văn bản
• Thêm khoảng cách dòng giữa các dòng văn bản
• Thêm khoảng cách xung quanh hình ảnh

Tạo thêm khoảng trắng 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 đang tạo trang web là họ không thể nhấn phím cách nhiều lần để tạo thêm khoảng trống. Để tạo thêm khoảng trắng trước, sau hoặc ở giữa văn bản của bạn, hãy sử dụng ký tự HTML mở rộng   (dấu cách không ngắt)

Ví dụ: với cụm từ "dấu cách    thừa" sử dụng dấu cách kép, chúng tôi có mã sau đây trong HTML của mình

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

Mẹo

Để biết danh sách các ký tự HTML đặc biệt mở rộng, hãy xem. Danh sách đầy đủ các ký tự HTML đặc biệt mở rộng

Giữ khoảng cách trong văn bản được dán vào một trang

If you are pasting text with extra spaces or tabs, you can use the HTML

 tag to keep the text formatted. Below is an example of how to paste text with extra spaces using the 
 tag.
This    text   has    lots of     spaces
Ví dụ trên được thực hiện bằng mã HTML bên dưới
<pre class="tab">This    text      has    lots of     spaces</pre>
See our HTML 
 tag page for further information on this tag.
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
Tạo thêm không gian xung quanh một phần tử hoặc đối tượng
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 trên cùng, bên phải, dưới cùng hoặc bên trái. Tuy nhiên, hãy đảm bảo rằng bạn hiểu sự khác biệt giữa lề và phần đệm trước khi quyết định loại khoảng trắng bạn muốn thêm xung quanh thành phần hoặc đối tượng. Như đã thấy trong hình bên dưới, phần đệm bao quanh phần tử, bên trong đường viền và lề bên ngoài đường viền
Ví dụ bên dưới hiển thị đoạn văn của chúng ta được bao quanh bởi một đường viền, thụt lề bằng một lề và có khoảng cách ở bên phải và bên dưới
Một ví dụ về đoạn văn có lề và phần đệm
Ví dụ trên được tạo bằng mã bên dưới
<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>
Trong phần đầu tiên của mã, "lề trái. 2. 5em;" thêm lề trái là 2. 5 em, mang đến 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 đường viền. Trong phần tiếp theo, "đệm. 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 trên cùng "0", phần đệm bên phải "7em", phần đệm dưới cùng "2em" và phần đệm bên trái 0. Phần còn lại của ví dụ này là xác định đường viền sẽ trông như thế nào
Tạo 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 văn này có lề trái là 2. 5 em từ phần tử chứa văn bản. CSS để tạo lề trái này được hiển thị bên dưới
.tab {
 margin-left: 2.5em
}
Sau khi đặt mã này vào 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 giao diện của tab. Giá trị của lề trái có thể tăng hoặc giảm tùy theo nhu cầu của bạn
Mặc dù chúng tôi khuyên dùng phương pháp trên, nhưng CSS lề trái cũng có thể được thêm nội tuyến, như minh họa trong ví dụ bên dưới
<p style="margin-left:2.5em">An example of a 5em left margin.</p>
Một ví dụ về lề trái 5em
Cách thụt lề hoặc tab văn bản trên trang web hoặc trong HTML
Thêm khoảng trống bên dưới một dòng hoặc đoạn văn bản
To add extra space below a line or paragraph of text, or push text down lower on the page once, you can use the 
 tag. Below is an example of how this technique can be applied.
<p>This sentence contains  example text.<br>
<br>
As you can see, two breaks add the space above.</p>
Đoạn mã trên tạo văn bản hiển thị bên dưới
Câu này chứa văn bản ví dụ. 

Như bạn có thể thấy, hai dấu ngắt sẽ thêm khoảng trống ở trên. 
Có thể thêm thời gian nghỉ nếu cần. Tuy nhiên, chúng tôi khuyên bạn nên sử dụng phương pháp CSS đã đề cập trước đó để thêm phần đệm và khoảng cách xung quanh văn bản của bạn nếu được thực hiện ở nhiều nơi trên một trang
Thêm khoảng cách dòng giữa các dòng văn bản
Khoảng cách giữa các dòng văn bản có thể được điều chỉnh bằng cách tăng và giảm chiều cao dòng bằng CSS để làm cho văn bản dễ đọc hơn. Dưới đây là một ví dụ về khoảng cách dòng bổ sung được thêm vào một đoạn văn bản
<p style="line-height:3.5em;">Text shown below with extra spacing</p>
Đoạn mã trên tạo văn bản hiển thị bên dưới
Văn bản mẫu này là một ví dụ về cách có thể thêm khoảng trắng giữa các dòng vào văn bản. Tuy nhiên, chúng tôi khuyên bạn không nên sử dụng nhiều khoảng cách dòng này vì nó gây khó đọc hơn. Chúng tôi chỉ sử dụng khoảng cách nhiều dòng này làm ví dụ
Trong ví dụ của chúng tôi ở trên, chúng tôi đã sử dụng 3. 5 em làm chiều cao dòng để giúp nhấn mạnh khoảng cách giữa các dòng. Tuy nhiên, để dễ đọc, chúng tôi khuyên bạn nên sử dụng khoảng 1. 7 em. Thêm một số khoảng cách bổ sung giữa các dòng luôn cải thiện khả năng đọc văn bản của bạn. Tuy nhiên, việc thêm quá nhiều có thể khiến việc theo dõi và quét trở nên khó khăn hơn
Thêm khoảng cách xung quanh hình ảnh
Để thêm khoảng trống xung quanh 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à các ví dụ về cách các kỹ thuật này có thể được áp dụng.