Bài 18: Các Phần Tử Block And Inline Trong HTML - Tìm ở đây

Trang chủ » Phần Tử Html » Bài 18: Các Phần Tử Block And Inline Trong HTML - Tìm ở đây

Có thể bạn quan tâm

Mỗi phần tử HTML có một giá trị hiển thị mặc định tùy thuộc vào kiểu của các phần tử của nó. Giá trị hiển thị mặc định cho hầu hết các phần tử là block hoặc inline.

Phần tử Block-level

Một phần tử block-level luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn (trải dài ra bên trái và bên phải mà nó có thể).

Thẻ <div> là một phần tử block-level.

Ví dụ các thẻ là phần tử block-level:

  • <div>
  • <h1> – <h6>
  • <p>
  • <form>

Phần tử Inline

Một phần tử inline không bắt đầu trên một dòng trống và chỉ chiếm nhiều chiều rộng khi cần thiết.

Thẻ <span> là một phần tử inline trong đoạn văn.

Ví dụ các thẻ là phần tử inline:

  • <span>
  • <a>
  • <img>

Phần tử <div>

Thẻ <div> là một phần tử block-level mà thường xuyên được sử dụng như một kho chứa cho các phần tử HTML khác.

Thẻ <div> không yêu cầu thuộc tính, nhưng style and class là các thuộc tính phổ biến.

Khi sử dụng cùng với CSS, thẻ <div> có thể sử dụng để style cho nội dung của các block:

Ví dụ:

<div style=“background-color:black; color:white; padding:20px;”>

<h2>Luân Đôn</h2> <p>Luân Đôn là một thành phố của nước Anh . Đây là thành phố đông dân nhất ở Vương quốc Anh, với một khu đô thị trên 13 triệu dân.</p>

</div>

Xem kết quả

Phần tử <span>

Thẻ <Span> là một phần tử inline thường được sử dụng như là kho chứa một số văn bản.

Thẻ <Span> không yêu cầu thuộc tính, nhưng style và class là thuộc tính phổ biến.

Khi sử dụng cùng với CSS, thẻ <span> có thể sử dụng style cho văn bản:

Ví dụ:

<h1>Tiêu đề <span style=“color:red”>quan trọng</span> của tôi</h1>

Xem kết quả

Nhóm thẻ HTML

Thẻ Mô tả
<div> Định nghĩa một phần trong tài liệu (block-level)
<span> Định nghĩa một phần trong tài liệu (inline)

Từ khóa » Phần Tử Html