Hướng dẫn này sẽ hướng dẫn bạn cách thêm khoảng trắng trong HTML và CSS. Tải xuống mã ví dụ miễn phí bao gồm.

Bạn đang xem : html css khoảng trắng

Chào mừng bạn đến với hướng dẫn về cách thêm khoảng trắng trong HTML và CSS. Văn bản có quá lộn xộn trên trang web của bạn không? Cần một số không gian thở và phép thuật giải mã?

Có một số cách để thêm khoảng trắng trong HTML và CSS:

  1. Sử dụng & amp; nbsp; để xác định khoảng trắng, & amp; ensp; cho 2 khoảng trắng và & amp; emsp; cho 4 các khoảng trắng.
  2. Các đoạn & lt; p & gt; để dàn trải các khối văn bản.
  3. & lt; br & gt; để thêm dấu ngắt dòng.
  4. & lt; pre & gt; để giữ nguyên khoảng cách và ngắt dòng.
  5. Thêm thêm khoảng cách đệm và / hoặc lề – & lt; p style = "padding: 10px; margin: 10px" & gt;
  6. Kiểm soát khoảng cách giữa mỗi ký tự, từ và dòng – & lt; p style = "letter-spacing: 5px; word-spacing: 10px; line-height: 15px;"

Điều đó bao gồm các khái niệm cơ bản nhanh chóng. Nhưng chúng ta hãy xem qua một số ví dụ thực tế trong hướng dẫn này - Đọc tiếp!

ⓘ Tôi đã bao gồm một tệp zip với tất cả mã nguồn mẫu ở đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào.

TRANG TRÌNH BÀY NHANH

MỤC LỤC

TẢI XUỐNG & amp; LƯU Ý

Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa.

LƯU Ý NHANH

Nếu bạn phát hiện ra lỗi, vui lòng bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với toàn bộ thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem

Nếu bạn phát hiện lỗi, vui lòng nhận xét bên dưới. Tôi cũng cố gắng trả lời những câu hỏi ngắn, nhưng đó là một người so với cả thế giới… Nếu bạn cần câu trả lời khẩn cấp, vui lòng xem danh sách các trang web của tôi để nhận trợ giúp về lập trình

TẢI XUỐNG MÃ VÍ DỤ

Nhấp vào đây để tải xuống mã nguồn, tôi đã phát hành mã nguồn theo giấy phép của MIT, vì vậy hãy thoải mái xây dựng hoặc sử dụng nó trong dự án của riêng bạn.

THÊM KHÔNG GIAN TRONG HTML CSS

Được rồi, bây giờ chúng ta hãy tìm hiểu các cách và ví dụ về việc thêm dấu cách trong HTML và CSS.

1) CÁC KHÔNG GIAN KHÔNG NGẮT

1a-nonbreak-space.html

  Không ngắt & amp; nbsp; không gian.
2 không phá vỡ & amp; ensp; các khoảng trắng.
4 không phá vỡ & amp; emsp; dấu cách.  

Khoảng trắng không ngắt.
2 dấu cách không ngắt.
4 khoảng trắng không ngắt.

Theo mặc định, các trình duyệt sẽ không hiển thị thêm khoảng trắng. Nếu bạn muốn thêm dấu cách cụ thể:

  • & amp; nbsp; cho một khoảng trắng.
  • & amp; ensp; cho hai khoảng trắng.
  • & amp; emsp; cho bốn khoảng trắng.

2) PARAGRAPHS

2-paragraph.html

  & lt; p & gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium, lacus non tristique unsdiet, neque magna porttitor enim, eget iaculis erat enim et sapien. & Lt; / p & gt;
& lt; p & gt; Đoạn khác. & lt; / p & gt;  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium, lacus non tristique blankdiet, neque magna porttitor enim, eget iaculis erat enim et sapien.

Một đoạn văn khác.

Cái này nên tự giải thích, & lt; p & gt; tạo một đoạn văn bản và trình duyệt sẽ tự động khoảng trắng giữa mỗi đoạn. Mặc dù chúng ta cũng có thể kiểm soát khoảng cách giữa từng ký tự, từ, dòng và khối - Ví dụ bên dưới.

3) GIẢI MÃ ĐƯỜNG DÂY

3-line-break.html

  & lt; p & gt;
  Dòng một. & Lt; br & gt;
  Dòng hai. & Lt; br & gt;
  Dòng ba.
& lt; / p & gt;  

Dòng một.
Dòng hai.
Dòng ba.

Theo mặc định, trình duyệt sẽ tự động bọc văn bản theo chiều rộng của đoạn / vùng chứa. Để thêm dấu ngắt dòng một cách cụ thể, hãy sử dụng thẻ & lt; br & gt; ngắt dòng.

4) VĂN BẢN ĐƯỢC ĐỊNH DẠNG TRƯỚC

4-pre.html

  & lt; pre & gt;
Chào thế giới.
        Đây là một khối văn bản được định dạng trước.
  Hãy cẩn thận với cách bạn sử dụng cái này.
      Nó giữ lại tất cả các ngắt dòng và khoảng trắng.
& lt; / pre & gt;  
 Xin chào thế giới.
        Đây là một khối văn bản được định dạng trước.
  Hãy cẩn thận với cách bạn sử dụng cái này.
      Nó giữ lại tất cả các ngắt dòng và khoảng trắng.

Một lần nữa, HTML sẽ loại bỏ các khoảng trắng thừa và bỏ qua các dấu ngắt dòng. Thay vào đó, nếu bạn muốn giữ lại tất cả các khoảng trắng và dấu ngắt, hãy sử dụng thẻ được định dạng trước & lt; pre & gt; .

5) XÍCH & amp; MARGIN - KHOẢNG CÁCH GIỮA CÁC CON LỖI

5-padding-margin.html

  & lt; style & gt;
/ * (A) THÊM PADDING, BORDER, MARGIN * /
.demoA {
  đệm: 10px;
  lề: 20px;
  viền: màu xanh lam đặc 5px;
  nền: aliceblue;
}
 
/ * (B) CỤ THỂ * /
.demoB {
  / * (B1) XÍCH & amp; LỀ */
  đệm: 5px 10px 15px 20px; / * trên cùng bên phải dưới cùng bên trái * /
  lề: 5px 10px 15px 20px; / * trên cùng bên phải dưới cùng bên trái * /
 
  / * (B2) BIÊN GIỚI * /
  border-top: 5px solid red;
  border-right: 5px solid green;
  border-left: 5px solid blue;
  border-bottom: 5px màu lục lam đặc;
 
  / * (B3) NỀN TẢNG * /
  nền: xanh nhạt;
}
& lt; / style & gt;
 
& lt; p class = "demoA" & gt; Dòng. & lt; / p & gt;
& lt; p class = "demoA" & gt; Dòng khác. & lt; / p & gt;
& lt; p class = "demoB" & gt; Dòng. & lt; / p & gt;  

Dòng.

Dòng khác.

Dòng.

Như trong phần giới thiệu ở trên, chúng ta có thể chỉ định padding margin để kiểm soát khoảng cách giữa mỗi đoạn. Nhưng thay vì khiến bạn bối rối về cách thức hoạt động thực sự của điều này, hãy để tôi giới thiệu mô hình hộp CSS:

Có, gần như mọi phần tử HTML đều tuân theo mô hình hộp này.

  • Ở trung tâm, chúng tôi có nội dung. Đây có thể là văn bản cho & lt; p & gt; , video cho & lt; video & gt; , hình ảnh cho & lt; img & gt; , v.v.
  • Nội dung được bao quanh bởi một lớp padding , tiếp theo là border .
  • Cuối cùng, margin là khoảng cách giữa mỗi phần tử HTML.

6) KHOẢNG CÁCH GIỮA KÝ TỰ / VĂN BẢN / DÒNG

6-text-spacing.html

  & lt; style & gt;
.demoC {
  / * KHÔNG GIAN GIỮA MỖI NHÂN VẬT * /
  khoảng cách giữa các chữ cái: 3px;
 
  / * KHÔNG GIAN GIỮA MỖI CÔNG VIỆC * /
  khoảng cách giữa các từ: 1em;

  / * KHOẢNG CÁCH GIỮA MỖI DÒNG * /
  chiều cao dòng: 200%;
}
& lt; / style & gt;
 
& lt; p class = "demoC" & gt;
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
& lt; / p & gt;  

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Cuối cùng, padding margin sẽ chỉ ảnh hưởng đến toàn bộ khối văn bản. Để kiểm soát khoảng cách giữa chính văn bản:

  • letter-spacing sẽ chỉ định khoảng trắng ở giữa

    mỗi ký tự

    .

  • word-spacing sẽ chỉ định khoảng trắng ở giữa

    mỗi từ

    .

  • line-height sẽ chỉ định khoảng trắng ở giữa

    mỗi dòng văn bản

    .

NHỮNG LỢI ÍCH HỮU ÍCH & amp; LIÊN KẾT

Đó là tất cả cho dự án này và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn.

TÓM TẮT

HTML

Thực thể
Mô tả
Tham khảo
& amp; nbsp;
Thêm một không gian không phá vỡ.
Nhấp vào đây
& lt; p & gt; & lt; / p & gt;
Một đoạn văn.
Nhấp vào đây
& lt; br & gt;
Ngắt dòng.
Nhấp vào đây
& lt; pre & gt; & lt; / pre & gt;
Khối văn bản được định dạng sẵn. Giữ lại tất cả các khoảng trắng và ngắt dòng.
Nhấp vào đây

CSS

Thuộc tính
Mô tả
Tham khảo
padding border margin
Mô hình Hộp - Nội dung, phần đệm, đường viền, lề.
Nhấp vào đây
ký tự giãn cách
Chỉ định khoảng cách giữa mỗi ký tự.
Nhấp vào đây
word-spacing
Chỉ định khoảng cách giữa mỗi từ.
Nhấp vào đây
line-height
Chỉ định chiều cao của mỗi dòng văn bản.
Nhấp vào đây

LIÊN KẾT & amp; TÀI LIỆU THAM KHẢO

BẢNG CHEAT HÌNH ẢNH

HẾT

Cảm ơn bạn đã đọc và chúng ta đã đến phần cuối của hướng dẫn này. Tôi hy vọng rằng nó đã giúp bạn với dự án của bạn, và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, vui lòng bình luận bên dưới. Chúc may mắn và viết mã vui vẻ!


Xem thêm những thông tin liên quan đến chủ đề html css khoảng trắng

Web Development Tutorial - JavaScript, HTML, CSS - Rock Paper Scissors Game

  • Tác giả: freeCodeCamp.org
  • Ngày đăng: 2018-11-09
  • Đánh giá: 4 ⭐ ( 5451 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: This web development tutorial shows how to use JavaScript, HTML, and CSS to create a Rock Paper Scissors Game in the browser.

    Tutorial by whatsdev. Check out their channel: https://www.youtube.com/channel/UC0tRdbXVDbhaRvZPKsRgmxg

    --

    Learn to code for free and get a developer job: https://www.freecodecamp.org

    Read hundreds of articles on programming: https://medium.freecodecamp.org

    And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

  là gì? Cách tạo khoảng cách (khoảng trắng) trong html

  • Tác giả: gbaydev.com
  • Đánh giá: 4 ⭐ ( 5799 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: là gì? Cách tạo khoảng trắng (khoảng cách) trong HTML, khi nào sử dụng và không sử dụng. Click để xem ngay nha.

Danh Sách Mã Html Các Ký Tự Khoảng Trắng Html

  • Tác giả: tlpd.vn
  • Đánh giá: 5 ⭐ ( 2827 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Khi các bạn chèn khoảng cách trong html thì mặc định html sẽ chỉ hiển thị một khoảng trắng giữa các từ dù các bạn có nhấn phím space bao nhiêu lần,  tuy nhiên các bạn lại đang muốn chèn nhiều ký tự khoảng trắng trong html? Hôm nay coder

white-space xử lý khoảng trắng dòng trong CSS

  • Tác giả: expressmagazine.net
  • Đánh giá: 4 ⭐ ( 4610 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Có khi nào bạn tự hỏi tại sao khi bạn gõ một mớ khoảng trắng bằng cách nhấn phím space liên tiếp cho đoạn văn mà bạn soạn ở chế độ html thì khi hiển thị nó cũng chỉ hiển thị là một khoảng trắng, thậm chí khoảng trắng bạn cố tình gõ ở đầu dòng thì bị loại bỏ khi hiển thị.

  là gì? Cách Tạo Khoảng Trắng Trong HTML Năm 2022

  • Tác giả: final-blade.com
  • Đánh giá: 4 ⭐ ( 3854 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

  là gì? Cách Tạo Khoảng Trắng Trong HTML Năm 2022

  • Tác giả: atpweb.vn
  • Đánh giá: 5 ⭐ ( 8142 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tạo khoảng cách là một việc làm khó hiểu và có rất nhiều cách để làm Việc này trong HTML, nếu như bạn làm không đúng cách có khả năng sẽ làm hỏng bố cục và giao diện so với thiết kế ban đầu. Mời bạn cùng nhâm nhi tách trà và đọc bài viết của ATP Web để thấu hiểu   là gì? Cách Tạo Khoảng Trắng Trong HTML Năm 2022.

Tổng Hợp Ký Tự Khoảng Trắng Trong Html, Cách Chèn Khoảng Trống Trong Html

  • Tác giả: mdtq.vn
  • Đánh giá: 4 ⭐ ( 8313 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tạo khoảng cách là một việc làm phức tạp và có rất nhiều cách để làm việc này trong HTML, nếu bạn làm không đúng cách có thể sẽ làm hỏng giao diện so với thiết kế ban đầu, Mời bạn cùng nhâm nhi tách trà và đọc bài viết của mình để hiểu   là gì? và cách tạo khoảng cách (khoảng trắng) trong html nhé

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Python Thử: Ngoại lệ và Gỡ lỗi - thử lệnh trong python

By ads_php