HTML
HTML5
CANVAS
HEADING TAGS
FORM TAGS
LIST TAGS
PARAGRAPH TAGS
p br pre
COMMON TAGS
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Phân biệt thẻ HTML Block và Inline

Trong bài này mình sẽ giải thích khái niệm về HTML Block và HTML Inline. Đây là vấn đề rất quan trọng, bởi nó liên quan đến nhiều thuộc tính CSS.

test php

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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. Thẻ nào đang hiển thị kiểu block thì nằm trên một khối riêng biệt, còn thẻ nào hiện thị dạng inline thì nằm trên một hàng.

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.

Bài viết này được đăng tại [free tuts .net]

Đặ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.

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

Kết quả:

block 1 JPG

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.

Demo RUN
<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.

html inline 1 JPG

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.

Demo RUN
<!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ả:

html inline 2 JPG

Ngược lại, nếu bạn muốn chuyển từ inline sang block thì sử dụng thuộc tính CSS: display:block.

Demo RUN
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            span{
                background: yellow;
                display: block
            }
        </style>
    </head>
    <body>
        <span>Nội dung thẻ span block thứ nhất</span>
        <span>Nội dung thẻ span block thứ hai</span>
    </body>
</html>

Kết quả: Mặc dù là thẻ span nhưng vẫn hiển thị block.

html block 2 JPG

Như vậy là mình đã hướng dẫn xong cách sử dụng inline và block trong HTML. Sau này khi làm việc với CSS bạn sẽ gặp nó rất nhiều đấy nhé.

Cùng chuyên mục:

Tạo Trang web E-commerce  từ HTML & CSS

Tạo Trang web E-commerce từ HTML & CSS

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ noscript html ...

Top