Block và Inline trong HTML

Code:

Demo

Thành phần block và Inline trong HTML

Block và Inline là hai khái niệm cơ bản nhưng rất quan trọng khi bạn bắt tay vào thiết kế website. Hầu hết các thành phần trong HTML đều thuộc block hoặc inline. Vậy block là gì? Inline là gì?

Block là những thẻ tự động tạo một dòng mới ở đầu và ở cuối của thẻ khi hiển thị trên trình duyệt. Ví dụ như thẻ: <h1>, <p>, <ul>, <table>

Ví dụ:

Trình duyệt sẽ hiển thị:

Thẻ P sẽ tự động tạo một dòng mới ở đầu và ở cuối thẻ. P là một thành phần kiểu block.

Inline là những thẻ hiển nội dung trên cùng một dòng (không tạo ra dòng mới, không xuống dòng). Ví dụ như thẻ: <b>, <td>, <a>, <img>

Ví dụ:

Trình duyệt sẽ hiển thị:

Thẻ span vẫn hiển thị nội dung trên cùng một dòng. Span là một thành phần kiểu inline.

Thẻ div trong HTML

Thẻ <div> là một thẻ block có thể sử dụng để chứa các thành phần HTML khác.

Thẻ <div> không mang ý nghĩa đặc biệt nào (như thẻ <h1> dùng để định nghĩa đề mục, thẻ <a> để tạo liên kết…) và cũng không kèm theo thuộc tính bắt buộc.

Vì là một thẻ block nên khi hiển thị, trình duyệt sẽ thêm một dòng ở trước và sau thẻ.

Cùng với CSS, thẻ <div> có thể được dùng để trang trí khung bao ngoài nội dung.

Thẻ span trong HTML

Thẻ <span> trong HTML là một thẻ inline có thể sử dụng để chứa nội dung là chữ.

Cũng giống thẻ <div>, thẻ <span> không mang ý nghĩa đặc biệt nào và cũng không có thuộc tính bắt buộc.

Nếu như thẻ <div> được tự động thêm dòng mới ở đầu và cuối thì thẻ <span> lại hoàn toàn không có bất kỳ trang trí tự động nào.

Khi sử dụng cùng với CSS, thẻ <span> có thể trang trí một phần của đoạn văn bản:

Demo