Tạo thêm không gian trong HTML (Gõ dấu cách trong html) của bạn trên một trang web có thể đạt được bằng nhiều cách tùy thuộc vào loại không gian bạn muốn tạo. Các phần sau có chứa nhiều cách khác nhau để tạo thêm không gian bằng cả HTML và CSS. Hãy cùng tìm hiểu trong bài viết dưới đây của webaffiliatevn.com
Các cách để tạo khoảng không gian cho trang web bao gồm:
- 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 yếu tố hoặc đối tượng.
- Tạo một tab bằng CSS và HTML.
- Thêm không gian bên dưới một dòng hoặc đoạn văn bản
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
& nbsp; (không phá vỡ không gian – là ký tự HTML mở rộng).
Ví dụ: Với “add space”, chúng ta có đoạn mã sau trong HTML
Giữ 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 có thêm khoảng trắng hoặc tab, bạn có thể sử dụng thẻ <pre> 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 khoảng trắng thừa bằng cách sử dụng thẻ <pre>.
Ví dụ:
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”rNxXvaM” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/rNxXvaM’>rNxXvaM</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
Tạo thêm không gian xung quanh một yếu tố hoặc đối tượng
Bất kỳ phần tử HTML nào cũng có thể có thêm khoảng cách bổ sung vào đầu, phải, dưới hoặc 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à phần đệm trước khi quyết định loại không gian 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 viền và phần rìa ngoài viền.
Ví dụ dưới đây cho thấy đoạn văn của chúng ta được bao quanh bởi một đường viền, thụt lề và khoảng cách ở bên phải và phía dưới.
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”YzwmLXL” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/YzwmLXL’>YzwmLXL</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
Giải thích:
Trong phần đầu tiên của đoạn mã, “margin-left: 2,5em;” là chúng ta sẽ thêm một lề trái 2,5 em , để cho phép xuất hiện văn bản thụt lề. Như thể hiện trong ví dụ, khoảng cách này nằm ngoài đường viền. Phần tiếp theo, “padding: 0 7em 2em 0;” đang xác định phần đệm trên cùng, 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 “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 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ó 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:
Sau khi đặt mã này vào tệp CSS , chúng ta 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.
Thêm không gian bên dưới một dòng hoặc đoạn văn bản
Nếu bạn cần thêm không gian bên dưới một dòng hoặc đoạn văn bản và chỉ cần thực hiện một lần, bạn có thể sử dụng thẻ <br> . Dưới đây là một ví dụ về cách áp dụng kỹ thuật này.
Ví dụ:
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”qBbeYbV” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/qBbeYbV’>qBbeYbV</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
>>> Xem thêm:
- Xuống dòng trong HTML
- Form trong html – cách tạo form đăng nhập html
- Cách tạo bảng trong HTML
- Thuộc tính Href trong thẻ a HTML
- Thẻ Meta trong HTML