Khung, khoảng cách và cách hiển thị

Vì sao hộp rộng hơn width?

Một hộp đặt width 200px nhưng có đệm và viền có thể chiếm rộng hơn 200px. Ta cần xác định width đang tính phần nào của hộp.

Từ trong ra ngoài

Quan sát sơ đồ để nối các khái niệm với nhau.

Mô hình hộp từ ngoài vào: margin, border, padding, content.

Mô hình hộp gồm nội dung, padding (đệm bên trong viền), border (viền) và margin (khoảng ngoài viền). Với box-sizing: content-box, width áp dụng cho phần nội dung; với border-box, width bao nội dung, đệm và viền. Margin vẫn nằm ngoài. ```css .card { width: 200px; padding: 10px; border: 2px solid navy; margin: 8px; } ``` Đây là content-box nếu không có quy tắc khác đổi box-sizing. Thuộc tính padding/margin viết bốn giá trị theo thứ tự trên, phải, dưới, trái. Trong cách hiển thị thông thường, phần tử block bắt đầu dòng mới, phần tử inline đi trong dòng. display có thể thay đổi cách hiển thị; display: none làm phần tử không tạo hộp trong bố cục. Không suy mọi phần tử block luôn có chiều rộng bằng cả màn hình.

Tính chiều rộng qua viền

Với quy tắc card trên và content-box, chiều rộng gồm nội dung, đệm, viền là 200 + 2×10 + 2×2 = 224px. Nếu tính thêm margin trái và phải trong trường hợp đặt cạnh theo chiều ngang đơn giản, tổng là 240px. Ta ghi rõ đang tính qua viền hay tính cả khoảng ngoài.

Thử vận dụng

Khoảng nằm giữa nội dung và đường viền là gì?

AmarginBpaddingCoutlineDfont-size

Đổi sang border-box

Nếu thêm box-sizing: border-box vào card, tổng chiều rộng qua viền là 200px; phần nội dung còn 200 − 20 − 4 = 176px. Margin không được tính vào width ở cả hai cách trên.

Ví dụ xem cách làm

Hộp content-box có width 150px, padding trái/phải 5px, border trái/phải 1px. Chiều rộng qua viền bằng bao nhiêu?

Ví dụ xem cách làm

padding: 4px 8px 12px 16px đặt đệm trái bao nhiêu? Giải thích thứ tự.

Những điều cần nhớ

Luôn xem box-sizing trước khi tính chiều rộng. Padding ở trong viền, margin ở ngoài; ghi rõ đại lượng cần tính để tránh cộng thiếu hoặc thừa.