Tìm hiểu sự khác biệt giữa các phần tử block-level (cấp khối) và inline-block (dòng khối) trong HTML.
Trong HTML, mọi phần tử đều có giá trị display mặc định được kế thừa từ User Agent Stylesheet (UAS) tích hợp sẵn trong tất cả trình duyệt.
Có hai tùy chọn giá trị hiển thị, block và inline:
- block trong CSS:
display:block; - inline trong CSS:
display: inline-block;
Hành vi hoặc kiểu dáng của bất kỳ phần tử HTML nào đến từ User Agent Stylesheet (UAS) của trình duyệt — mà bạn có thể dễ dàng ghi đè. Vì vậy, bất kỳ phần tử cấp khối nào cũng có thể chuyển đổi thành phần tử dòng, bằng một khai báo đơn giản: display: inline-block; — và ngược lại.
Phần tử Block-Level là gì?
Trong HTML, một phần tử cấp khối (block-level element) là phần tử luôn bắt đầu trên một dòng mới (như ngắt dòng) và chiếm toàn bộ chiều rộng của container (phần tử cha) của nó.
Vì vậy, nếu tôi thêm một phần tử <div> ngay bên dưới đoạn văn này, nó sẽ chiếm toàn bộ chiều rộng của container cha từ cạnh trái sang cạnh phải.
Ví dụ mã:
<div>Tôi là một phần tử cấp khối.</div>Kết quả:
Ồ, khó thấy nó chiếm toàn bộ chiều rộng. Để dễ thấy hơn, hãy thêm viền cho nó:
<div style="border:1px solid #dd4c4f">Tôi là một phần tử cấp khối.</div>Kết quả:
Bây giờ bạn thấy phần tử <div> chiếm toàn bộ chiều rộng của container, mà trên trang web này bạn đang xem là một phần tử <article>.
Như tôi đã đề cập, các phần tử cấp khối bắt đầu một dòng mới, và đây là cách nó trông ở mức độ mã và cách nó hiển thị trong trình duyệt từ góc độ người dùng:
<div style="border:1px solid #dd4c4f">Tôi là một phần tử cấp khối.</div> <div style="border:1px solid #dd4c4f">Tôi là một phần tử cấp khối khác.</div>Cách nó trông:
Nếu hai phần tử <div> trên là inline, chúng sẽ ngồi ngay cạnh nhau trên cùng một dòng (như bạn sẽ thấy ở phần tiếp theo). Nhưng vì chúng là phần tử cấp khối, chúng ngồi trên dòng riêng trong bố cục và mỗi cái chiếm toàn bộ chiều rộng của container cha.
Tất cả phần tử HTML cấp khối
Danh sách đầy đủ các phần tử cấp khối trong HTML:
<address>- Thông tin liên hệ.
<article>- Nội dung bài viết.
<aside>- Nội dung aside.
<blockquote>- Trích dẫn dài ("block" quotation).
<details>- Widget tiết lộ.
<dialog>- Hộp thoại.
<dd>- Mô tả thuật ngữ trong danh sách mô tả.
<div>- Phân chia tài liệu.
<dl>- Danh sách mô tả.
<dt>- Thuật ngữ danh sách mô tả.
<fieldset>- Nhãn tập trường.
<figcaption>- Chú thích hình ảnh.
<figure>- Nhóm nội dung phương tiện với chú thích
<figcaption>). <footer>- Chân trang hoặc trang.
<form>- Biểu mẫu nhập liệu.
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>- Các cấp tiêu đề 1-6.
<header>- Đầu trang hoặc trang.
<hgroup>- Nhóm thông tin tiêu đề.
<hr>- Đường kẻ ngang (đường phân chia).
<li>- Mục danh sách.
<main>- Container nội dung chính.
<nav>- Chứa liên kết điều hướng.
<ol>- Danh sách có thứ tự.
<p>- Đoạn văn.
<pre>- Văn bản được định dạng trước.
<section>- Phần của trang web.
<table>- Bảng.
<ul>- Danh sách không thứ tự.
Phần tử Inline (dòng) là gì?
Trong HTML, các phần tử dòng (inline) là các phần tử không bắt đầu trên một dòng mới, và chỉ chiếm không gian chúng cần (chiều rộng nội dung của chúng, ví dụ độ dài văn bản bên trong).
Ví dụ mã:
<div style="display:inline-block;border:1px solid #dd4c4f;"> Tôi là một phần tử inline-block </div>Cách nó trông:
Các phần tử Inline Block không bắt đầu trên một dòng mới (ngắt dòng).
Vì vậy, nếu bạn có hai phần tử inline block cạnh nhau ở mức độ mã:
<div style="display:inline-block;border:1px solid #dd4c4f"> Tôi là một phần tử inline block. </div> <div style="display:inline-block;border:1px solid #dd4c4f"> Tôi là một phần tử inline block khác. </div>Chúng hiển thị trong trình duyệt như sau:
Và chỉ để minh họa rõ hơn sự khác biệt giữa inline block và block, hãy so sánh chúng "cạnh nhau":
Tất cả phần tử HTML inline block
Danh sách tất cả các phần tử dòng trong HTML:
<a><abbr><acronym><audio>(chỉ nếu có điều khiển hiển thị)<b><bdi><bdo><big><br><button><canvas><cite><code><data><datalist><del><dfn><em><embed><iframe><img><input><ins><kbd><label><map><mark><meter><noscript><object><output><picture><progress><q><ruby><s><samp><script><select><slot><small><span><strong><sub><sup><svg><template><textarea><time><u><tt><var><video><wbr>
Một khác biệt quan trọng khác giữa block & inline
Bạn đã học rằng block & inline khác nhau về:
- Chiều rộng đầy đủ (block) vs. chiều rộng nội dung (inline)
- Dòng mới (block) vs. cùng dòng (inline).
Nhưng còn một sự khác biệt khác về cách bạn có thể sử dụng chúng:
- Inline block phần tử không thể chứa các phần tử cấp khối.
- Block phần tử có thể chứa các phần tử inline block.
Vì vậy, điều này không chấp nhận được trong HTML:
<span><p>Phần tử block bên trong phần tử inline block.</p></span>Nhưng điều này là chấp nhận được trong HTML:
<p><span>Phần tử inline block bên trong phần tử block.</span></p>Ý tưởng đằng sau sự phân biệt mô hình nội dung cấu trúc này là các phần tử block nên được dùng để mô tả các cấu trúc lớn hơn các phần tử inline.
Nhớ rằng, giá trị display của bất kỳ phần tử HTML nào có thể bị ghi đè trong bảng định kiểu CSS của bạn, nhưng những gì bạn đã thấy hôm nay là cách các phần tử cấp khối và inline-block hoạt động theo mặc định nếu bạn không tự định kiểu chúng.