Bộ trực quan hóa mô hình hộp CSS

Cách sử dụng

1. Nhập các giá trị mô hình hộp: xác định margin, border, padding và kích thước nội dung trong các trường hoặc thanh trượt tương tác.
2. Khám phá hình ảnh hóa: sơ đồ cổ điển của các hộp lồng nhau được cập nhật theo thời gian thực — margin (cam), border (vàng), padding (xanh lá) và nội dung (xanh dương), tất cả đều được dán nhãn rõ ràng.
3. Sao chép CSS: nhấp Sao chép CSS để có các thuộc tính mô hình hộp đầy đủ của phần tử được cấu hình.

Tại sao sử dụng trình hình dung mô hình hộp CSS?

Mô hình hộp CSS là một trong những khái niệm cơ bản nhất của bố cục web — và là một trong những nguồn lỗi phổ biến nhất, đặc biệt khi trộn các giá trị box-sizing, gộp margin và định kích thước border. Trình hình dung tương tác này làm cho mô hình hộp trở nên cụ thể và hữu hình: bạn điều chỉnh các giá trị và ngay lập tức thấy cách margin, border và padding xếp chồng xung quanh nội dung. Cần thiết để học, gỡ lỗi và dạy CSS.

Tính năng

• Sơ đồ tương tác: chế độ xem cổ điển của mô hình hộp lồng nhau với các lớp được mã hóa màu (margin, border, padding, nội dung).
• Chuyển đổi box-sizing: chuyển đổi giữa content-box và border-box để xem mỗi chế độ ảnh hưởng đến kích thước tổng thể như thế nào.
• Các mặt riêng lẻ: xác định các giá trị trên/phải/dưới/trái độc lập cho margin, padding và border.
• Tính toán kích thước tổng: hiển thị chiều rộng và chiều cao tổng được tính của phần tử.
• Đầu ra CSS: tạo CSS sẵn sàng sử dụng cho mô hình hộp được cấu hình.

Câu hỏi thường gặp

Sự khác biệt giữa content-box và border-box là gì?

Với content-box (mặc định), width và height chỉ áp dụng cho khu vực nội dung — padding và border thêm vào kích thước tổng thể của phần tử. Với border-box, width và height bao gồm padding và border, làm cho kích thước dễ dự đoán hơn. Hầu hết các CSS reset hiện đại áp dụng box-sizing: border-box cho tất cả các phần tử.

Gộp margin là gì?

Khi hai margin dọc chạm nhau (giữa các phần tử block liền kề hoặc giữa cha và con đầu/cuối), chúng gộp thành một margin duy nhất bằng với giá trị lớn nhất trong hai. Điều này không xảy ra với các con flex hoặc grid, hoặc với các phần tử có padding hoặc border.

Cách xóa khoảng trống thừa dưới các phần tử inline?

Các phần tử inline (như <img>) có một khoảng trống nhỏ bên dưới chúng do căn chỉnh đường cơ sở của line-height. Sửa nó bằng cách đặt display: block trên phần tử, hoặc vertical-align: bottom, hoặc font-size: 0 trên phần tử cha.