CSS box model

Module CSS box model định nghĩa các thuộc tính margin và padding, cùng với các thuộc tính height, width và border, tạo nên box model của CSS.

Mọi phần tử hiển thị trên một trang web đều là một hộp được bố trí theo mô hình định dạng trực quan (visual formatting model). Các thuộc tính CSS xác định kích thước, vị trí và mức xếp chồng của chúng, với các thuộc tính box model (và các thuộc tính khác) xác định kích thước bên ngoài của mỗi hộp và khoảng trống xung quanh chúng.

Mỗi hộp có một vùng nội dung hình chữ nhật, bên trong hiển thị bất kỳ văn bản, hình ảnh và nội dung nào khác. Nội dung có thể được bao quanh bởi padding, border và margin ở một hoặc nhiều phía. Padding nằm xung quanh nội dung, border nằm xung quanh padding, và margin nằm bên ngoài border. Box model mô tả cách các thành phần này — nội dung, padding, border và margin — phối hợp với nhau để tạo ra một hộp như được hiển thị bởi CSS.

Các thành phần của CSS box model

Module CSS box model xác định các thuộc tính vật lý (hay "page relative") như margin-top và padding-top. Các thuộc tính flow-relative như margin-block-start và margin-inline-start (liên quan đến hướng văn bản) được định nghĩa trong Logical Properties and Values. Module box model được mở rộng bởi module CSS box sizing, vốn giới thiệu giá trị intrinsic size và cho phép định nghĩa aspect ratio cho các phần tử được điều chỉnh kích thước tự động ở ít nhất một chiều.

<box-edge>

Hướng dẫn

Giới thiệu về CSS box model: Giải thích một trong những khái niệm cơ bản của CSS: box model. Mô hình này định nghĩa cách CSS bố trí các phần tử, bao gồm vùng content, padding, border và margin của chúng.
Mastering margin collapsing: Đôi khi, hai margin kề nhau được gộp thành một. Bài viết này mô tả các quy tắc chi phối khi nào và tại sao điều này xảy ra, và cách kiểm soát nó.
Visual formatting model: Giải thích về mô hình định dạng trực quan.