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

Bài viết hướng dẫn cách chèn khoảng trắng và ngắt dòng trong HTML. Vì dù bạn có gõ dấu cách bao nhiêu lần, HTML cũng sẽ hiển thị 1 dấu cách nên để chèn nhiều hơn một khoảng trống, bạn sẽ cần dùng tới thẻ HTML. Cách chèn khoảng trống trong HTML (khoảng trống ...

Bài viết hướng dẫn cách chèn khoảng trắng và ngắt dòng trong HTML. Vì dù bạn có gõ dấu cách bao nhiêu lần, HTML cũng sẽ hiển thị 1 dấu cách nên để chèn nhiều hơn một khoảng trống, bạn sẽ cần dùng tới thẻ HTML.

Cách chèn khoảng trống trong HTML (khoảng trống không bị ngắt - non-breaking space)

Thông thường HTML chỉ hiển thị một khoảng trắng giữa các từ, không cần biết bạn đã gõ dấu cách bao nhiêu lần. Để buộc các dấu cách đã bị bỏ kia phải hiển thị, hãy gõ   vào nơi bạn muốn chèn.

Ví dụ gõ Xin   chào. sẽ tạo ra một khoảng trắng thừa giữa Xinchào.

Đây được gọi là khoảng trống không bị ngắt hay không bị phá hủy vì nó ngăn không cho xuống dòng ở vị trí đó. Nếu lạm dụng kí tự này, trình duyệt sẽ khó chèn dấu ngắt dòng đẹp và đúng quy cách.

Có thể gõ   để tạo khoảng trống.

Chèn khoảng trống dài hơn trong HTML

Có thể dùng 1 trong các lựa chọn sau:

  • Chèn 2 khoảng trống:  
  • Chèn 4 khoảng trống:  
  • Chèn tab:     

Lùi đầu dòng đoạn văn bằng CSS

Thuộc tính Padding hay Margin của CSS đưa ra chỉ dẫn trực tiếp cho trình duyệt nên kết quả sẽ đồng nhất hơn dùng thẻ  

Ở đoạn <head></head> của văn bản, chèn đoạn mã dưới đây:

<style>p.indent{ padding-left: 1.8em }<.style>

Trở về phần thân văn bản HTML, khi cần lùi đầu dòng cho đoạn văn chỉ cần dùng thẻ:

<p class=”indent”></p>

Để điều chỉnh mức độ lùi đầu dòng, hãy thay đổi con số 1.8 trong đoạn mã CSS trên. Giữ phần “em” đằng sau để đo độ dài tương ứng với kích thước font.

Tạo ngắt dòng trong HTML

Gõ <br> sau dòng văn bản sẽ buộc đoạn văn bản sau đó xuống, sau đó gõ </br> trước dòng văn bản sẽ đặt đoạn xuống dòng giữa nó và đoạn văn bản trước.

Ví dụ đoạn mã sau:

Quản trị mạng là trang thủ thuật công nghệ. <br> Quản trị mạng là trang thủ thuật công nghệ.

thì giữa 2 câu trên sẽ có đoạn xuống dòng.

Định nghĩa đoạn văn nếu cần

Nếu có một khối văn bản mới muốn dùng làm đoạn văn, gõ <p> trước và </p> sau đoạn văn bản đó để tách nó khỏi các đoạn văn bản không được định dạng khác.

Hầu hết trình duyệt sẽ tách đoạn văn bằng một dòng trống.

Dùng đoạn văn bản được định dạng trước để đọc khoảng trống

Với các đoạn văn bản đã được định dạng, khoảng trống bạn gõ sẽ hiển thị trên trang HTML. Để định dạng trước, dùng thẻ <pre> trước đoạn văn bản và kết thúc bằng </pre>.

Dấu Enter cũng sẽ hiển thị thành đoạn ngắt dòng trong đoạn văn bản đã được định dạng trước.

Tóm tắt

  • Gõ &nbsp; để chèn một khoảng trống
  • Gõ &ensp; để chèn 2 khoảng trống
  • Gõ &emsp; để chèn 4 khoảng trống
  • Gõ &nbsp;&nbsp;&nbsp;&nbsp; để chèn tab
  • Gõ <br> để ngắt dòng
  • Gõ <br><br> để ngắt dòng 2 lần
Bài liên quan

Cách chèn file PDF vào trong bài viết Joomla

Nếu bạn chưa biết cách đính kèm tập tin pdf vào trong bài viết của mình, hãy sử dụng plug-ins JCE File Manager, nó sẽ giúp bạn làm được điều đó một cách đơn giản nhất. Dưới đây là các bước giúp bạn chèn file pdf vào trong bài viết Joomla nhờ công cụ JCE: 1. Tạo một bài viết mới và thêm dòng ...

Tạ Quốc Bảo viết 18:08 ngày 04/10/2018

Bài 19: Cách chèn Video vào bài viết trong WordPress

Bkasoft.net – Hướng dẫn cách chèn video vào bài viết một cách đơn giản và nhanh chóng nhất. Xem chi tiết hướng dẫn tại đây! Có 2 cách để chèn Video vào bài viết đó là: Chèn video vào bài viết từ URL Đầu tiên bạn hãy Copy địa chỉ video mà bạn muốn chèn tại Youtube, ví dụ như hình dưới ...

Tạ Quốc Bảo viết 16:51 ngày 04/09/2018

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

Bài viết hướng dẫn cách chèn khoảng trắng và ngắt dòng trong HTML. Vì dù bạn có gõ dấu cách bao nhiêu lần, HTML cũng sẽ hiển thị 1 dấu cách nên để chèn nhiều hơn một khoảng trống, bạn sẽ cần dùng tới thẻ HTML. Cách chèn khoảng trống trong HTML (khoảng trống ...

Hoàng Hải Đăng viết 11:09 ngày 22/08/2018

Cách HIỆN/ẨN phần tử HTML bằng phương thức show()/hide() trong jQuery

Ở bài hướng dẫn này, bạn sẽ được tìm hiểu cách hiện và ẩn một phần tử HTML. Bấm vào đây để HIỆN phần tử bên dưới Bấm vào đây để ẨN phần tử bên dưới Cách hiện và ẩn một phần tử HTML Phương thức show() dùng để hiện một phần tử HTML Phương thức hide() dùng để ẩn một phần tử HTML ...

Tạ Quốc Bảo viết 10:52 ngày 18/08/2018

Cách sử dụng CSS trong HTML

CSS là gì? CSS (Cascading Style Sheets) là một ngôn ngữ dùng để định dạng cho các phần tử HTML (Ví dụ: chỉnh kích cỡ chữ, chỉnh font chữ, màu chữ, màu nền, hình nền, đường viền,....) dựa trên các cặp thuộc tính:giá trị thuộc tính Với việc sử dụng CSS, ta có thể định dạng ra các phần tử HTML ...

Hoàng Hải Đăng viết 10:38 ngày 18/08/2018
0