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

18 lượt xem

HTML là ngôn ngữ đánh dấu siêu văn bản được ứng dụng rộng rãi trong việc lập trình web. Tương tự như bộ ứng dụng Microsoft Word, công cụ này có tác dụng bố cục và định dạng cơ bản cho website. Do đó, để tạo khoảng cách trong HTML mà không làm hỏng giao diện ban đầu, hãy áp dụng theo hướng dẫn của Công nghệ AZ sau đây.

khoang cach trong html dellfcvietnam 1

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

Cách tạo khoảng cách trong HTML

HTML hay Hypertext Markup Language là một dạng ngôn ngữ đánh dấu siêu văn bản. Công cụ này giúp cấu thành khung sườn cho một website trở nên có hệ thống và hoàn chỉnh hơn. Đồng thời, hỗ trợ các lập trình viên khai báo các tệp tin kỹ thuật số như hình ảnh, nhạc, video…

HTML rất cần thiết khi chứa đựng những yếu tố cần thiết cho mọi loại lập trình web. Do đó, nếu muốn xây dựng cấu trúc trang chủ tốt với nhiều thành phần đặc trưng của văn bản thì không thể bỏ qua công cụ này. Nhờ có ngôn ngữ lập trình HTML, website của bạn sẽ hiển thị các nội dung bên trong chính xác để mọi người có thể truy cập.

Thông thường, khoảng trắng html chỉ hiển thị duy nhất 1 lần giữa các từ dù cho người dùng có nhấn Space bao nhiêu lần đi nữa. Để làm xuất hiện các dấu cách này, hãy gõ mã lệnh “ ” hay “ ” ngay tại vị trí mà bạn muốn chèn.

Với khoảng cách trong HTML không bị ngắt này sẽ ngăn ký tự xuống dòng ở đây. Tuy nhiên, việc bạn quá làm dụng sẽ làm ảnh hưởng đến thao tác chèn dấu ngắt dòng của trình duyệt không đẹp và sai quy cách.

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

Ngoài cách chèn mã lệnh nêu trên, bạn cũng có thể sử dụng mã code chính xác để thêm dấu cách html với độ rộng khác nhau. Những thủ thuật này sẽ không làm ảnh hưởng đến dấu ngắt dòng trong đoạn. Cụ thể như sau:

  • Chèn ký tự khoảng trắng trong html với độ rộng gấp 2 lần bình thường:  
  • Thêm khoảng cách html bằng 4 khoảng trắng bình thường:  
  • Chèn dấu tab trong html:     

Tạo ngắt dòng trong HTML

Để tạo ngắt dòng trong HTML, bạn có thể sử dụng các ký tự <br> và dòng văn bản ngay phía sau sẽ tự động xuống dòng. Nhờ đó đoạn văn sẽ được ngắt xuống dòng và phân tách thành những phần nhỏ. Công nghệ AZ sẽ lấy một ví dụ đơn giản giúp mọi người hình dùng cách làm cũng hiệu quả khi thao tác nhé. 

khoang cach trong html dellfcvietnam 2

Tạo khoảng cách trong HTML là điều cần thiết trong việc lập trình web

“Thân em như dải lụa đào.<br>Phất phơ giữa chợ biết vào tay ai?”

Khi sử dụng công cụ <br>, mọi người sẽ nhận được kết quả như sau:

“Thân em như dải lụa đào

Phất phơ giữa chợ biết vào tay ai?”

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

Nếu muốn sử dụng đoạn văn trong một khối văn bản mới thì có thể nhập mã <p> phía trước hoặc </p> ngay sau vị trí đó. Nhờ đó bạn dễ dàng tách đối tượng ra khỏi vị trí văn bản không được định dạng khác. Trên hầu hết các trình duyệt, đoạn văn bản sẽ được phân tách thông qua một dòng trống. 

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

Trong CSS có thuộc tính Margin và Padding sẽ cung cấp những chỉ dẫn cụ thể cho trình duyệt. Nhờ đó, phần kết quả thu về so với mã &nbsp; sẽ có sự động nhất hơn. Vì vậy, khi nếu muốn lùi đầu dòng trong đoạn văn bằng công cụ này, mọi người sẽ cần thực hiện theo các bước hướng dẫn của Công nghệ AZ. Cụ thể là:

khoảng cách trong html

Lùi đầu dòng đoạn văn bằng CSS với những chỉ dẫn cụ thể cho trình duyệt

  • Bạn có thể chèn code sau đây ngay tại <head></head> như sau: <style>p.indent{ padding-left: 1.8em }<.style>
  • Khi cần lùi đầu dòng với đoạn văn tại phần thân văn bản HTML, hãy sử dụng thẻ sau: <p class=”indent”></p>
  • Nếu muốn tùy chỉnh độ rộng lùi đầu dòng, bạn chỉ cần thay đổi số 1.8 trong mã CSS bên trên bằng số bất kỳ. Lưu ý giữ là phần đuôi “em” phía sau để đo độ dài tương ứng với size font.

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

Khoảng cách trong HTML sẽ được hiển thị ngay trên trang đối với đoạn văn bản đã thực hiện thiết lập cài đặt. Nếu muốn định dạng trước, hãy sử dụng mã <pre> đặt ngay trước đoạn văn và </pre> để kết thúc. 

Lúc này, Enter sẽ được dùng để ngắt dòng trong đoạn văn bản này.  Cách chèn khoảng trắng trong HTML với phần định dạng trước được thực hiện với các lựa chọn sau:

  • &nbsp; insert 1 khoảng trắng.
  • &ensp; thêm 2 khoảng trắng.
  • &emsp; chèn 4 khoảng trắng.
  • &nbsp;&nbsp;&nbsp;&nbsp; insert tab.
  • <br> ngắt dòng.
  • <br><br> 2 lần ngắt dòng.

Lời kết

Với hướng dẫn chi tiết thủ thuật tạo khoảng cách trong HTML của Công nghệ AZ vừa giới thiệu, hy vọng đã giúp ích cho bạn khi xây dựng bố cục web. Hãy áp dụng ngay những kiến thức tin học này vào cho Công nghệ AZ biết kết quả ngay dưới phần bình luận bài viết nhé!

Trả lời

Email của bạn sẽ không được hiển thị công khai.

Trang web này sử dụng cookie để cung cấp cho bạn trải nghiệm duyệt web tốt hơn. Bằng cách duyệt trang web này, bạn đồng ý với việc sử dụng cookie của chúng tôi.