Có bao giờ bạn thắc mắc rằng, tại sao nội dung của 2 thẻ p lại nằm ở 2 hàng khác nhau, còn ở 2 thẻ span thì lại nằm trên cùng một hàng? Đó là vì trình duyệt quy định cách hiển thị block và inline

1. Thẻ HTML block là gì?

HTML block là cách hiển thị của một thẻ HTML trên trình duyệt sẽ ở dạng khối, có độ dài 100% và có chiều cao phụ thuộc vào nội dung nằm bên trong. Điều này có nghĩa rằng tất cả những thẻ HTML nằm phía dưới khi hiển thị lên trình duyệt sẽ nằm ở một hàng khác.

Chúng ta có một số thẻ HTML dạng block như: div, p, header, footer, table, ul, li, section, article.. và nhiều thẻ khác.

Đặc điểm chung của các thẻ này là:

  • Có chiều dài mặc định là 100%
  • Có thể thiết lập khoảng trống giữa nội dung và đường viền.
  • Có thể thay đổi độ rộng bằng thuộc tính width.

Ví dụ: Hai thẻ div sẽ hiển thị trên 2 hàng khác nhau.

1
2
<div>Nội dung thẻ div thứ nhất</div>
<div>Nội dung thẻ div thứ hai</div>

Kết quả:

2. Thẻ HTML inline là gì?

HTML inline là cách hiển thị nội dung bên trong của thẻ HTML trong 1 phạm vi xác định. Nghĩa là chiều dài của nó sẽ phụ thuộc vào độ lớn của dữ liệu. Vì vậy, các thẻ inline sẽ hiển thị nối tiếp nhau chứ không xuống hàng như block.

Có rất nhiều thẻ HTML hiển thị dạng inline như: span, strong, i, b, a, br, big, button, textarea, label, ...

Ví dụ: Hai thẻ span sẽ hiển thị dữ liệu liên tiếp nhau, nó không nằm ở 2 hàng như trong ví dụ 1.

1
2
<span>Nội dung thẻ span thứ nhất</span>
<span>Nội dung thẻ span thứ hai</span>


Kết quả: Hiển thị cùng 1 hàng.

3. Khi nào sử dụng thẻ HTML inline và block?

Việc phân ra hai định dạng như vậy là có lý do cả. Nếu bạn muốn tạo một thẻ HTML bao bọc một khối bên trong thì nên sử dụng thẻ div hoặc thẻ p, bởi vì nó hiển thị dạng block. Còn nếu bạn muốn hiển thị dữ liệu trên một hàng thì hãy sử dụng các thẻ inline.

Câu hỏi đặt ra là liệu ta có thể biến một thẻ block thành thẻ inline không? Rất đơn giản, chỉ cần sử dụng thuộc tính CSS display là được nhé.

Ví dụ: Thiết lập CSS display:inline cho hai thẻ div.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                background: yellow;
                display: inline
            }
        </style>
    </head>
    <body>
        <div>Nội dung thẻ div inline thứ nhất</div>
        <div>Nội dung thẻ div inline thứ hai</div>
    </body>
</html>

Kết quả: