Block và Inline trong CSS

Mô hình định dạng trực quan CSS là thuật toán được sử dụng để xử lý các tài liệu cho các thiết bị hiển thị trực quan (máy tính, di động, tivi…). Trong mô hình định dạng trực quan, mỗi phần tử trong cây tài liệu không tạo hoặc tạo nhiều hộp theo mô hình hộp

Bố cục của các hộp này phụ thuộc vào các yếu tố sau:

• Kích thước hộp.
• Loại phần tử (block hoặc inline).
• Sơ đồ định vị (normal flow, float và định vị tuyệt đối).
• Mối quan hệ giữa các phần tử trong cây tài liệu.
• Thông tin bên ngoài vd: Kích thước khung nhìn (viewport), kích thước tích hợp của hình ảnh, v.v.

Lưu ý: Cây tài liệu là hệ thống phân cấp của các phần tử được mã hóa trong tài liệu nguồn. Mọi phần tử trong cây tài liệu đều có chính xác một phần tử cha, ngoại trừ phần tử gốc, không có phần tử cha nào.

Mỗi phần tử được hiển thị trên một trang web sẽ tạo ra một hình hộp chữ nhật. Phần sau đây mô tả các loại hộp có thể được tạo bởi một phần tử.

Và mình chắc chắn qua phần dưới này bạn sẽ hiểu rõ về bản chất phần tử Block và phần tử Inline trong CSS.

Phần tử cấp khối (Block-level) là những phần tử được định dạng trực quan dưới dạng khối (nghĩa là chiếm toàn bộ chiều rộng có sẵn của khung nhìn), nó sẽ ngắt dòng trước và sau phần tử.

Ví dụ: Phần tử đoạn (p), tiêu đề (h1 đến h6), phần chia (div), v.v…. sẽ chiếm trọn 1 dòng trên trang web.

Nói chung, các phần tử cấp khối (Block – level) có thể chứa các phần tử nội tuyến (Inline-level) và có thể chứa cả các phần tử cấp khối khác.

Ví dụ:

• Thẻ phần tử div (block-level) có thể chứa phần tử span (inline-level) như thế này

<div>Phần tử Block có thể chứa phần tử <span>inline</span></div>

• Thẻ phần tử div (block-level) có thể chứa phần tử div khác như thế này:

<div>
    <div>Phần tử Block có thể chứa cả phần tử Block</div>
</div>

Phần tử cấp nội tuyến (Inline-level) là những phần tử của tài liệu nguồn không tạo thành các khối nội dung mới.

Hiểu đơn giản là nó không bẻ / ngắt dòng, không chiếm toàn bộ dòng.

Ví dụ: Các đoạn văn bản được nhấn mạnh trong một đoạn văn (em), các nhịp (span), yếu tố nhấn mạnh (strong), v.v.

Các phần tử nội tuyến thường chỉ có thể chứa văn bản và các phần tử nội dòng khác, ví dụ:

<span>Phần tử Inline chỉ có thể chứa văn bản và <strong>phần tử inline khác</strong></span>

Lưu ý: Không giống như các phần tử Block, một phần tử Inline chỉ chiếm đủ chiều rộng cần thiết và không buộc ngắt dòng.

Còn nếu bạn cố tính viết code HTML của bạn như thế này (Nhét phần tử Block vào trong phần tử Inline):

<p>
    <div>Bạn không nên làm như vậy</div>  
</p>

Thì khi trình duyệt render thì nó sẽ render thành như thế này:

<p>
</p>
    <div>Bạn không nên làm như vậy</div>
<p>
</p>

Điều này làm sai lệch đi ý định của bạn (và thực tế ý định này cũng không được chấp nhận)

Vì thế có thể layout website của bạn sẽ bị phá vỡ hoặc những CSS bạn viết không thể áp dụng được một cách chính xác nhất.

Tuy nhiên, bạn có thể thay đổi cách một phần tử sẽ được hiển thị trên trang web. Thay đổi tử phần tử Block sang phần tử Inline (và ngược lại) bằng cách sử dụng thuộc tính display trong CSS.

Trên đây là bài viết của eLib.VN về Block và Inline trong CSS. Hi vọng khi hiểu rõ về phần tử Block và phần tử Inline thì quá trình học lập trình của bạn sẽ trở nên dễ dàng hơn.