HTML/CSS | Thẻ inline, block #1

Học HTML, CSS từ Zero Tới Hero

• Thẻ Inline và Block là gì?
• Đặc tính của thẻ Inline và thẻ Block
• Đặc tính của thẻ block
• Đặc tính của thẻ Inline
• Cách tra cứu thẻ Inline và thẻ Block

Thẻ Inline và Block là gì?

Tất cả các thẻ HTML mặc định có thuộc tính display, tùy vào loại thẻ display sẽ có giá trị tương ứng. Một thẻ được gọi là Inline hay Block cần dựa vào thuộc tính display mặc định của thẻ có giá trị là inline hay block.

Ví dụ, thẻ Block mặc định có display: block, thẻ Inline mặc định có display: inline.

Theo bạn, thẻ <h1> là thẻ Inline hay Block?

Inspect trình duyệt, quan sát user agent stylesheet sẽ thấy thuộc tính display: block. Vậy thẻ <h1> chính là thẻ Block.

Trường hợp thẻ không có thuộc tính display trong user agent stylesheet thì đó là thẻ Inline. Để kiểm tra, click vào tab Computed.

Đặc tính của thẻ Inline và thẻ Block

Đặc tính của thẻ block

Block có nghĩa là khối, thẻ Block được sử dụng để phân tách các khối, ví dụ: <div>, <p>, <h1> tới <h6>, <ul>, <li>, v.v.

Các thẻ Block có các đặc tính sau:

• Tạo ra một khoảng trống ở trên và dưới nó, đẩy các phần tử khác ra khỏi cùng một hàng.
• Luôn bắt đầu trên một hàng mới.
• Chiều ngang mặc định được thừa hưởng 100% từ thẻ cha chứa nó.

Ví dụ:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>Hôm nay là một ngày đẹp trời</p>

Heading 1

Heading 2

Heading 3

Hôm nay là một ngày đẹp trời

Đặc tính của thẻ Inline

Inline là nội tuyến, hiểu nôm na là cùng một dòng. Các thẻ Inline thường là: <span>, <a>, <strong>, <em>, v.v.

Đặc tính của thẻ Inline:

• Khi có nhiều thẻ Inline đứng cạnh nhau thì chúng sẽ cùng nằm trên cùng một hàng.
• Chiều ngang các thẻ Inline bằng nội dung của nó.
• Không thể thiết lập width và height cho thẻ Inline.

Ví dụ:

<p>
  Các màu sắc phổ biến:
  <span class="inline" style="color: red;">Đỏ</span>
  <span class="inline" style="color: green;">Xanh lá</span>
  <span class="inline" style="color: blue;">Xanh dương</span>
  <span class="inline" style="color: orange;">Cam</span>
</p>

Các màu sắc phổ biến: Đỏ Xanh lá Xanh dương Cam

Cách tra cứu thẻ Inline và thẻ Block

Để tra cứu các thẻ HTML thuộc loại thẻ Inline hay Block, tìm kiếm Google với từ khóa “Inline & Block element” và tham khảo tại HTML Reference hoặc tại W3C.

Tóm tắt

• Tất cả các thẻ HTML mặc định có thuộc tính display, tùy vào loại thẻ đó thì display sẽ có giá trị tương ứng. Ví dụ: thẻ Block sẽ mặc định có display: block, thẻ Inline sẽ mặc định có display: inline.
• Trường hợp thẻ không có thuộc tính display trong user agent stylesheet sẽ là thẻ inline.
• Có thể tra cứu một thẻ HTML thuộc loại thẻ Inline hay Block tại HTML Reference.
• Các thẻ Block luôn bắt đầu trên một hàng mới.
• Các thẻ Block chiếm toàn bộ chiều rộng hết mức có thể. Trình duyệt có thể tự động thêm margin (top, bottom) vào một số thẻ Block như: h1 - h6, <p>, ul, ol, v.v.
• Thẻ Inline không bắt đầu trên một hàng mới, độ rộng của thẻ Inline tùy thuộc vào nội dung mà nó chứa. Khi có nhiều thẻ Inline đứng cạnh nhau thì chúng sẽ nằm trên cùng một hàng.