Bố cục block và inline

Tất cả các thành phần đều có các giá trị hiển thị mặc định phụ thuộc vào kiểu thành phần của nó. Giá trị hiển thị mặc định cho hầu hết các đối tượng là block và inline.

Các thành phần dạng block

Các thành phần dạng block (khối) luôn bắt đầu bằng một dòng mới và có chiều rộng tối đa có thể.

Đây là một thẻ <div> dạng block.

Các thẻ HTML dạng block:

• <div>
• <h1> - <h6>
• <p>
• <form>

Các thành phần dạng inline

Các thành phần dạng inline (cùng dòng) không tự động chèn dòng mới và trình bày lên cùng dòng với các phần tử khác.

Đây là một phần văn bản dùng thẻ <span> trong đoạn văn.

Một số thành phần inline:

• <span>
• <a>
• <img>

Thẻ <div>

Thẻ <div> là một phần tử mặc định hiển thị dạng block và thường dùng để chứa các phần tử khác.

Thẻ <div> không bắt buộc có thuộc tính, tuy nhiên thuộc tính style và class thường được dùng.

Khi dùng thẻ <div> trong HTML, một khối được tạo ra dùng để bao đóng cho những phần tử phía trong.

Ví dụ:

<div style="background-color:black; color:white; padding:20px;">

<h2>TBit</h2>
<p>Cộng đồng TBit bắt đầu hoạt động từ tháng 8/2014 với mục đích phi lợi nhuận. Diễn đàn là nơi trao đổi, giao lưu, học hỏi các vấn đề về công nghệ thông tin.</p>

</div>

Thẻ <span>

Thẻ <span> là một phần từ inline (cùng dòng) thường được dùng để chứa những thứ khác như văn bản chẳng hạn.

Thẻ <span> không bắt buộc dùng thuộc tính, nhưng thuộc tính style và class hay được dùng.

Khi dùng <span>, phần bên trong thẻ sẽ hiển thị trên cùng dòng với các thành phần khác.

Ví dụ:

<h1>Một tiêu đề <span style="color:red">quan trọng</span> ở đây</h1>