Nội dung cấp khối

Trong CSS, nội dung tham gia vào bố cục khối được gọi là nội dung cấp khối (block-level content).

Trong bố cục khối, các hộp được xếp chồng lên nhau theo chiều dọc, bắt đầu từ phía trên của khối chứa. Cạnh ngoài bên trái của mỗi hộp chạm vào cạnh trái của khối chứa. Một phần tử cấp khối luôn bắt đầu trên một dòng mới. Trong các chế độ viết ngang, như tiếng Anh hay tiếng Ả Rập, nó chiếm toàn bộ không gian ngang của phần tử cha (vùng chứa) và không gian dọc bằng chiều cao của nội dung của nó, do đó tạo ra một "khối".

Note: Hành vi trên của bố cục khối thay đổi nếu writing-mode của khối chứa được đặt thành giá trị khác với giá trị mặc định.

Note: Các phần tử HTML (HyperText Markup Language) về mặt lịch sử được phân loại là phần tử "cấp khối" hoặc phần tử "nội tuyến". Là một đặc điểm trình bày, điều này hiện được chỉ định bởi CSS.

Ví dụ

Trong ví dụ này, hai phần tử đoạn văn (<p>) được đặt trong một <div>.

html
<div>
  <p>
    This the first paragraph. The background color of these paragraphs have been
    colored to distinguish them from their parent element.
  </p>
  <p>This is the second paragraph.</p>
</div>

Các phần tử đoạn văn (<p>) mặc định ở cấp khối. Đó là lý do tại sao chúng được hiển thị trong bố cục khối:

Xem thêm