Bài 18: Các phần tử Block and Inline trong HTML
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ể).
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>
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:
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) |
1 phản hồi
[…] tử “lạ” mà trình duyệt chưa hiểu được như là phần tử “Inline“. Inline là những thẻ hiển nội dung trên cùng một dòng (không tạo ra dòng […]