Phần Tử HTML Dạng Block Và Inline

• Block và Inline
• Phần tử HTML dạng block
• Phần tử HTML dạng inline
• Thẻ <div> và <span>

Phần tử dạng block và inline

Trong văn bản HTML, các phần tử HTML thuần túy được phân loại ra thành 2 cấp độ theo cách thức mà phần tử được trình duyệt render hiện thị cho người dùng đó là những phần tử cấp độ inline (hiện thị trong hàng) và những phần tử cấp độ block (hiện thị theo khối). Mặc dù ngày nay có thể dùng CSS để chuyển đổi một phần tử ở dạng inline sang block và ngược lại với thuộc tính css: display, thì bạn vẫn cần biết một phần tử ban đầu nó thuộc về dạng nào để sử dụng cho đúng.

Phần tử HTML cấp độ block

Phần tử HTML cấp độ block (hiện thị dạng khối) là những phần tử sắp xếp theo chiều đứng của phần tử cha, trình duyệt luôn tạo ra một dòng mới, rồi đến không gian dành cho phần tử này, và kết thúc là một dòng mới.

Mặc định phần tử dạng này, có chiều rộng chiếm hết chiều rộng phẩn tử cha, chiều cao mở rộng theo nội dung của nó. Các phần tử dạng block như: <h1>, <form>, <li>, <ol>, <ul>, <p>, <pre>, <table>, <div> ...

Các phần tử block hiện thị liên tiếp theo chiều đứng của phần tử chứa nó

Minh họa

Minh họa cho biết một phần tử cha chứa nội dung của nó và các phần tử con dạng block: block1, block2, block2.

• Độ rộng của phần tử block mở rộng tối đa (thường bằng độ rộng phần tử chứa). Xem block1
• Ba phần từ này hiện sắp xếp hiện thị theo chiều đứng của phần tử, nó luôn xuống dòng mới - kể cả phía trước không gian đủ cho nó chiếm giữ (block3 không nằm trái block2 và nằm dưới - tạo ra dòng mới phía trước).
• Ví dụ này dùng CSS để thay đổi độ rộng của phần tử (block2, block2), nhưng nguyên tắc block nó không bị thay đổi
• Chiều cao phần tử tùy thuộc vào nội dung nó chứa bên trong

Nội dung khác trong phần tử cha block1block1 block2 block3 ...block3 Nội dung khác trong phần tử cha

Phần tử HTML cấp độ inline

Phần tử HTML cấp độ inline (trong hàng) là những phần tử chiếm không gian chiều ngang theo nội dung của phần tử, không tạo ra dòng mới (xuống dòng) trước và sau phần tử. Các phần tử inline như: <b>, <a>, <strong>, <img>, <input>, <em>, <span> ...

Ví dụ:

Nội dung khác trong phần tử cha inline1 inline2 inline3 Nội dung khác trong phần tử cha

Khi sử dụng cần nhớ quy tắc đảm bảo mô hình nội dung của HTML: phần tử cấp độ inline không được chứa phần tử cấp độ block, nó chỉ chứa dữ liệu hoặc các phần tử inline khác. Phần tử block thì được chứa các phần tử block, inlinne, dữ liệu. Có một số ngoại lệ như thẻ <a> (inline) có thể chứa phần tử kiểu block.

Ví dụ thẻ a có thể chứa phần tử block:

<a href="/html/"> <h2>Học HTML</h2> <p>Các bài học HTML</p> </a>

Phần tử HTML cấp độ inline

Trong HTML có hai loại phần tử sử dụng với mục đích tổng quát, một phần tử cấp độ block là <div> và một phần tử cấp độ inline là <span>. Xem chi tiết tại: Phần tử >div> và <span>

Mục lục bài viết Block và InlinePhần tử HTML dạng blockPhần tử HTML dạng inlineThẻ <div> và <span> ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB Đăng ký nhận bài viết mới