CSS Box Model

Tất cả các phần tử HTML đều có thể được coi như là những chiếc hộp.

Mô hình chiếc hộp trong CSS 

Trong CSS, thuật ngữ "box model" được sử dụng khi nói về việc thiết kế và trình bày bố cục.

Mô hình chiếc hộp trong CSS về cơ bản là một chiếc hộp bao bọc xung quanh mỗi phần tử HTML. Nó bao gồm: margin, border, padding, và nội dung thực sự. Hình ảnh bên dưới sẽ minh hoạ mô hình chiếc hộp:

Giải thích về các phần khác nhau của ví dụ:

• Content - Nội dung của chiếc hộp, ở đó văn bản và các hình ảnh sẽ xuất hiện.
• Padding - Dọn sạch một vùng xung quanh nội dung. Padding là trong suốt.
• Border - Một đường viền đi xung quanh padding và content.
• Margin - Dọn dẹp một vùng bên ngoài border. Margin là trong suốt.

Mô hình chiếc hộp cho phép chúng ta thêm một đường viền vào xung quanh phần tử, và định nghĩa khoảng trống giữa các phần tử.

Ví dụ sau sẽ thể hiện về mô hình chiếc hộp:

div {
    width: 300px;
    border: 15px solid green;
    padding: 50px;
    margin: 20px;
}

Chiều rộng và chiều cao của một phần tử

Để thiết lập chính xác chiều rộng và chiều cao của một phần tử trên tất cả các trình duyệt, chúng ta cần phải biết cách mô hình chiếc hộp làm việc như thế nào.

Quan trọng: Khi chúng ta thiết lập thuộc tính width và thuộc tính height của một phần tử bằng CSS, chúng ta chỉ mới thiết lập chiều rộng và chiều cao của vùng nội dung. Để tính toán kích thước đầy đủ của một phần tử, chúng ta cũng phải cộng thêm padding, border và margin.

Ví dụ: Phần tử <div> sau sẽ có tổng chiều rộng là 350px: 

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
}

Sau đây là cách tính:

320px (chiều rộng của phần tử)

+ 20px (padding bên trái + padding bên phải)

+ 10px (đường viền bên trái + đường viền bên phải)

+ 0px (margin bên trái + margin bên phải)

= 350px

Tổng chiều rộng của một phần tử sẽ được tính như sau:

Tổng chiều rộng của phần tử  = chiều rộng của phần tử + padding bên trái + padding bên phải + đường viền bên trái + đường viền bên phải + margin bên trái + margin bên phải.

Tổng chiều cao của một phần tử sẽ được tính như sau:

Tổng chiều cao của phần tử = chiều cao của phần tử + padding cạnh trên + padding cạnh dưới + đường viền cạnh trên + đường viền cạnh dưới + margin cạnh trên + margin cạnh dưới.