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.

CSS box model thực sự định nghĩa điều gì

CSS box model là biểu diễn hình chữ nhật của mọi phần tử trên trang web. Mỗi phần tử có bốn hộp đồng tâm: hộp content (nơi văn bản, hình ảnh, phần tử con sống), hộp padding (khoảng cách giữa nội dung và border, bên trong ranh giới có thể nhìn thấy), hộp border (đường viền có thể nhìn thấy được vẽ xung quanh padding), và hộp margin (khoảng cách trong suốt bên ngoài border tách phần tử này khỏi các phần tử lân cận). Kích thước hiển thị tổng của một phần tử là content + padding + border; margin không nhìn thấy nhưng đẩy các phần tử khác ra xa.

Khái niệm quan trọng là box-sizing. Theo mặc định (box-sizing: content-box, giá trị đặc tả CSS 1), các thuộc tính width và height chỉ áp dụng cho hộp content. Nếu bạn đặt width: 200px; padding: 20px; border: 2px solid, tổng chiều rộng được render là 200 + 40 + 4 = 244 pixel. Điều này không trực quan: một phần tử rộng 200px thực sự chiếm 244 pixel không gian ngang. Phương án thay thế box-sizing: border-box (thêm vào trong CSS 3) đảo ngược điều này: thuộc tính width là kích thước hiển thị tổng bao gồm padding và border, vì vậy khu vực content thu nhỏ để vừa. border-box là điều mà hầu hết các nhà phát triển mong đợi; nó trở thành tiêu chuẩn thực tế thông qua reset CSS năm 2012 của Paul Irish * { box-sizing: border-box }.

Hiểu box model là quan trọng vì các lỗi layout hầu như luôn truy về sự nhầm lẫn về giá trị nào áp dụng cho hộp nào. Tại sao phần tử của tôi rộng hơn tôi đặt? là bất ngờ của content-box. Tại sao margin của tôi không đẩy các anh chị em xuống? thường là sự sụp đổ của margin. Tại sao padding-top: 50% lại hành xử kỳ lạ? vì padding phần trăm được tính tương đối với chiều rộng của phụ huynh, không phải chiều cao. Mỗi nhà phát triển CSS đều gặp phải những nhầm lẫn này; trình hiển thị này làm cho chúng cụ thể bằng cách cho phép bạn điều chỉnh giá trị và xem hình học hộp kết quả theo thời gian thực.

Công cụ này hoạt động bên dưới như thế nào

Sơ đồ tương tác là một loạt các div màu lồng nhau tương ứng với mỗi hộp (margin màu cam, border màu vàng, padding màu xanh lá cây, content màu xanh dương). Khi bạn thay đổi các giá trị đầu vào, JavaScript cập nhật các thuộc tính style nội tuyến của các div sơ đồ để chúng phản ánh các giá trị bằng số và trực quan. Tỉ lệ được mở rộng để phù hợp với khu vực xem trước; giá trị pixel tuyệt đối sẽ đẩy sơ đồ ra khỏi màn hình cho các đầu vào điển hình.

Tính toán kích thước tổng phụ thuộc vào chế độ box-sizing. Đối với content-box: tổng chiều rộng = chiều rộng content + padding-left + padding-right + border-left + border-right. Đối với border-box: tổng chiều rộng = giá trị width (padding và border được trừ khỏi khu vực content). Công cụ tính toán cả hai chế độ đồng thời khi bạn chuyển đổi box-sizing, vì vậy bạn có thể so sánh trực tiếp.

Đầu ra CSS được tạo sử dụng các đầu vào của bạn làm các giá trị thuộc tính: box-sizing: border-box; width: 200px; padding: 10px 20px; border: 2px solid; margin: 1rem auto;. Sao chép trực tiếp vào stylesheet của bạn và áp dụng lớp khớp. Không có gì rời khỏi trình duyệt của bạn; mọi thứ chạy cục bộ trong JavaScript. Không phân tích, không backend, không tài khoản. Tải lại và trạng thái biến mất.

Lịch sử ngắn về CSS box model

• CSS 1 chỉ định content-box, 1996.Khuyến nghị CSS 1 (tháng 12 năm 1996) định nghĩa box model W3C: width chỉ áp dụng cho content, padding và border thêm vào kích thước tổng. Điều này trở thành tiêu chuẩn, nhưng Internet Explorer 4 và 5 triển khai một mô hình thay thế trong đó width bao gồm padding và border (tương tự như border-box ngày nay).
• Quirks mode của IE và Box Model War, 1997 đến 2001.IE 4 (1997) và IE 5 ra mắt với box model không tiêu chuẩn của họ; IE 6 (2001) giới thiệu chế độ tiêu chuẩn được kích hoạt bởi khai báo doctype chuyển sang box model W3C. Sự khác biệt tạo ra nhiều năm lỗi layout đa trình duyệt và kiến thức quirks mode vs standards mode mà mọi nhà phát triển web phải học cho đến 2010.
• Reset CSS và stylesheet cổ điển của Eric Meyer, 2007.Eric Meyer xuất bản reset CSS chuẩn (tháng 5 năm 2007) đặt margin, padding và các mặc định khác về không trên tất cả các phần tử. Trở thành thực hành chuẩn cho styling đa trình duyệt có thể dự đoán. Reset không giải quyết trực tiếp box-sizing nhưng chuẩn hóa sự hỗn loạn xung quanh các mặc định kế thừa.
• Thuộc tính box-sizing trong CSS3, 2009 đến 2014.CSS3 giới thiệu box-sizing: border-box như một thay thế opt-in cho content-box. WebKit và Firefox hỗ trợ từ 2009; IE 8 (2009) trở thành phiên bản IE đầu tiên hỗ trợ nó nguyên bản. Cho phép các nhà phát triển chọn box model kiểu IE hoặc kiểu W3C cho mỗi phần tử.
• Border-box phổ quát của Paul Irish, 2012.Paul Irish (Google) xuất bản bài blog * { box-sizing: border-box } FTW (tháng 2 năm 2012), lập luận rằng border-box phổ quát là mặc định hợp lý cho các dự án mới. Mẫu lan rộng nhanh chóng qua các mặc định framework (Bootstrap, Tailwind, Material UI). Đến 2015, hầu hết các reset CSS và framework ra mắt với border-box làm mặc định.
• Thuộc tính logic, 2018 đến 2024.CSS Logical Properties and Values Module Level 1 (CR tháng 6 năm 2018) giới thiệu các thay thế không phụ thuộc vào hướng: margin-inline-start (đầu hướng văn bản) thay vì margin-left, padding-block (trên + dưới) thay vì padding-top + padding-bottom. Quan trọng cho các ngôn ngữ phải sang trái (Ả Rập, Do Thái) và quốc tế hóa hiện đại. Hỗ trợ trình duyệt đạt 95%+ vào năm 2022.

Quy trình làm việc thực tế

• Gỡ lỗi các lỗi layout.Khi một phần tử được render ở kích thước không mong đợi, mở bảng kiểu được tính toán của DevTools trình duyệt sẽ tiết lộ bốn giá trị hộp bằng số. Trình hiển thị này hữu ích để tính toán toán học trước: nếu tôi đặt width 200, padding 16, border 2, tổng kích thước trong mỗi chế độ box-sizing là gì? Đặc biệt hữu ích khi dạy người mới tại sao width: 100% với padding tràn ra khỏi phụ huynh trong chế độ content-box.
• Dạy CSS cho người mới.Box model là khái niệm trừu tượng đầu tiên mà các nhà phát triển web mới bắt đầu phải nội tâm hóa. Một hình ảnh tương tác có mã màu đánh bại đọc đặc tả. Người hướng dẫn bootcamp và người học tự học sử dụng trình hiển thị box model như một cách xúc giác để xem cách margin, border và padding xếp chồng. Công cụ này tồn tại một phần cho mục đích này.
• Định kích thước thành phần hệ thống thiết kế.Hệ thống thiết kế chỉ định chiều cao nút, nhịp padding và quy mô margin trong các token (ví dụ: spacing-1, spacing-2, spacing-3). Khi triển khai chúng trong mã, box model xác định liệu nút render cuối cùng có phải là kích thước dự định hay không. Hình dung toán học trước để bắt các lỗi off-by-padding trước khi chúng được chuyển tới giai đoạn bàn giao Figma-sang-React.
• Thiết kế đáp ứng và margin phần trăm.Các giá trị phần trăm cho padding, margin, width và height được tính tương đối với chiều rộng content của phụ huynh (không phải chiều cao, đáng ngạc nhiên), có thể gây hành vi kỳ lạ trên di động. Trình hiển thị box model giúp bạn suy nghĩ qua những gì phần trăm có nghĩa là trước khi viết CSS. Ví dụ: padding-top: 50% trên một div tạo ra một container có tỷ lệ khung hình vuông (được sử dụng cho placeholder hình ảnh trong những ngày trước thuộc tính aspect-ratio).
• Định kích thước mục tiêu nhấn khả năng tiếp cận.WCAG 2.1 SC 2.5.5 (Cấp AAA) khuyến nghị mục tiêu cảm ứng tối thiểu 44x44 pixel CSS. Box model xác định liệu content + padding kết hợp của một nút có đáp ứng ngưỡng này hay không. Sử dụng trình hiển thị để xác nhận rằng padding: 12px 16px xung quanh văn bản line-height 18px cho một nút vượt quá 44px theo cả hai chiều, thỏa mãn hướng dẫn.
• Căn chỉnh CSS Grid và Flexbox.Các công cụ layout hiện đại (CSS Grid, Flexbox) coi mỗi mục grid/flex như một hộp tuân theo box model. Hiểu cách padding và margin tương tác với gap, justify-content và align-items đòi hỏi sự lưu loát về box model. Sự sụp đổ margin bị triệt tiêu bên trong các container flex/grid, điều này thường làm ngạc nhiên các nhà phát triển CSS quen với layout block truyền thống.

Cạm bẫy phổ biến và ý nghĩa của chúng

• Bất ngờ về sự sụp đổ của margin.Khi hai phần tử block có margin chạm nhau theo chiều dọc, chúng sụp đổ thành giá trị lớn hơn trong hai, không phải tổng. Một margin dưới 20px gặp một margin trên 30px tạo ra không gian 30px, không phải 50px. Margin của phụ huynh và con đầu tiên/cuối cùng cũng sụp đổ nếu phụ huynh không có padding, border hoặc overflow được đặt. Bên trong các container flex hoặc grid, margin không sụp đổ. Quy tắc này đã bắt mỗi nhà phát triển CSS vào một lúc nào đó.
• Toán học chiều rộng content-box vs border-box.Đặt width: 100%; padding: 20px trên một phần tử content-box làm cho nó rộng hơn 40px so với phụ huynh (tràn). Với border-box, cùng một khai báo nằm bên trong phụ huynh đúng cách. Đây là gotcha box-model phổ biến nhất; quy tắc phổ quát * { box-sizing: border-box } sửa chữa hầu hết nó từ trước. Luôn biết bạn đang làm việc với chế độ nào.
• Padding/margin phần trăm tương đối với chiều rộng.padding-top: 50% và margin-bottom: 50% tính phần trăm dựa trên chiều rộng content của phụ huynh, không phải chiều cao. Điều này không rõ ràng và là cơ sở của hack container tỷ lệ khung hình cổ điển (một div với padding-top: 56.25% tạo ra một hộp 16:9). Bây giờ CSS có thuộc tính aspect-ratio, nhưng mã legacy và Tailwind hiện đại đều dựa vào thủ thuật percent-padding.
• Khoảng cách baseline của phần tử inline.Một <img> bên trong một div container có một khoảng cách bí ẩn 4 đến 6 pixel bên dưới nó. Điều này là vì các phần tử inline căn chỉnh theo baseline văn bản, để lại chỗ cho descender. Sửa với img { display: block }, img { vertical-align: bottom }, hoặc đặt font-size: 0 trên phụ huynh. Đây là một trong những lỗi box-model lâu đời nhất trong CSS, có từ năm 1996.
• Margin âm cho các thủ thuật layout.Margin chấp nhận giá trị âm, kéo các phần tử về phía nhau và đôi khi hữu ích (ví dụ: mở rộng một container bên ngoài padding của phụ huynh). Tuy nhiên, margin âm là nguồn thường xuyên của các lỗi chồng chéo gây nhầm lẫn. Sử dụng chúng có chủ ý, bình luận mã của bạn và ưu tiên định vị CSS Grid/Flexbox khi có thể. Padding âm là CSS không hợp lệ và bị các trình duyệt bỏ qua.
• Padding + border + content > container.Khi tổng content + padding + border vượt quá chiều rộng có sẵn của phụ huynh, phần tử tràn. Các giải pháp phổ biến: box-sizing: border-box, giảm giá trị width, sử dụng overflow: hidden trên phụ huynh (cắt overflow), hoặc min-width: 0 trên các con flex để ghi đè hành vi min-width: auto ngầm định. Nhiều lỗi layout bị hỏng trên di động là overflow do toán học box-model.

Quyền riêng tư: mọi thứ chạy trong trình duyệt của bạn

Các công cụ học và hình dung CSS đến trong hai hương vị: các trang HTML đơn giản chạy JavaScript phía client (riêng tư, nhanh, không thiết lập) và các trình chỉnh sửa đám mây với các dự án được lưu (cộng tác nhưng với sự đánh đổi về quyền riêng tư). Công cụ này thuộc loại đầu tiên. Các giá trị bạn nhập, trạng thái chuyển đổi box-sizing của bạn, CSS được tạo của bạn: tất cả đều ở trong phiên trình duyệt của bạn. Tải lại trang và trạng thái biến mất trừ khi bạn sao chép CSS trước.

Cổ phần quyền riêng tư ở đây thấp vì các giá trị box model hiếm khi chứa thông tin nhạy cảm. Tuy nhiên, sự thiếu phân tích quan trọng: bạn có thể thử nghiệm tự do mà không có quá trình thử và sai của bạn được ghi lại. Đặc biệt hữu ích trong các bối cảnh lớp học hoặc đào tạo doanh nghiệp nơi việc học sinh hoặc thực tập sinh đăng ký tài khoản trên các nền tảng bên thứ ba là một điểm ma sát. Đây là một trang tĩnh duy nhất không có backend, có thể sử dụng trong bất kỳ trình duyệt nào, bao gồm các máy doanh nghiệp bị khóa.

Khi một công cụ khác là lựa chọn đúng

• DevTools trình duyệt cho gỡ lỗi trực tiếp.DevTools của Chrome và Firefox bao gồm một bảng box model hiển thị bốn giá trị hộp cho bất kỳ phần tử nào được chọn trên một trang trực tiếp. Chỉnh sửa các giá trị nội tuyến và xem trang cập nhật. Để gỡ lỗi các layout trang thực tế (không phải khám phá box-model trừu tượng), DevTools đánh bại công cụ này vì nó hoạt động trên mã thực của bạn với các thác CSS thực và sự kế thừa.
• Figma cho đầu ra spec thiết kế.Các nhà thiết kế sử dụng Figma, Sketch hoặc Adobe XD để bố trí các thành phần với đo lường pixel chính xác. Bảng kiểm tra của công cụ thiết kế xuất các giá trị margin và padding mà các nhà phát triển dịch thành CSS. Đối với việc bàn giao thiết kế-sang-phát-triển, công cụ thiết kế là nguồn sự thật; trình hiển thị này là để hiểu hành vi CSS, không phải để tạo ra các đặc tả thành phần sản xuất.
• CSS-in-JS cho đóng gói thành phần.Khi xây dựng các thư viện thành phần với styled-components, Emotion, vanilla-extract hoặc các giải pháp CSS-in-JS tương tự, box model được đóng gói trong mỗi thành phần. Margin trên wrapper ngoài cùng, padding bên trong. Trình hiển thị này giúp suy luận về hình học của một thành phần riêng lẻ; thư viện xử lý sự phối hợp layout giữa các thành phần.
• Các công cụ CSS Grid/Flexbox cho layout.Đối với layout đa phần tử (lưới trang, thư viện thẻ, thanh điều hướng), CSS Grid và Flexbox là các trừu tượng đúng, không phải chỉ box model. Các công cụ Flexbox Generator và CSS Grid Generator của chúng tôi giúp với các layout đó trực tiếp. Box model là cần thiết nhưng không đủ cho layout hiện đại; sử dụng công cụ phù hợp cho quy mô phù hợp.

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

Tôi nên sử dụng * { box-sizing: border-box } phổ quát không?

Đối với hầu hết các dự án, có. Đề xuất năm 2012 của Paul Irish hiện là mặc định công nghiệp và phù hợp với cách hầu hết các nhà phát triển mong đợi width và height hoạt động. Các framework như Bootstrap, Tailwind, Bulma và Material UI ra mắt với border-box làm mặc định. Các dự án hiện đại bắt đầu vào năm 2026 nên đặt *, *::before, *::after { box-sizing: border-box; } ở đầu reset của họ, và hiếm khi cần phải nghĩ về box-sizing lần nữa. Các ghi đè cụ thể sang content-box có thể có cho các phần tử riêng lẻ nơi border-box sẽ làm hỏng mọi thứ.

Tại sao margin của tôi đẩy phụ huynh xuống thay vì đẩy các anh chị em?

Đây là sự sụp đổ của margin. Khi margin trên của một con gặp cạnh trên của phụ huynh mà không có padding/border ở giữa, margin của con thoát ra và áp dụng cho phụ huynh thay vào đó. Các sửa chữa: thêm padding-top: 1px vào phụ huynh (bất kỳ giá trị nào hoạt động), thêm border: 1px solid transparent, đặt phụ huynh thành một container flex hoặc grid (sự sụp đổ bị triệt tiêu trong các chế độ đó), hoặc sử dụng display: flow-root trên phụ huynh (một quy tắc hiện đại rõ ràng thiết lập bối cảnh định dạng block mới). Tất cả những điều này chặn margin khỏi việc sụp đổ qua.

Sự khác biệt giữa margin: auto và margin: 0 là gì?

margin: 0 nghĩa là không có margin; phần tử ngồi sát các phần tử lân cận. margin: auto nghĩa là trình duyệt tính toán margin để phân phối không gian ngang còn lại, thường được sử dụng để căn giữa một phần tử block: margin-left: auto; margin-right: auto; chia đều không gian còn lại. margin: auto auto auto auto (hoặc shorthand margin: auto) căn giữa cả ngang và dọc bên trong một container flex. Ngoài flex/grid, chỉ margin auto ngang hoạt động.

Outline khác border như thế nào?

Outline vẽ xung quanh một phần tử nhưng nằm ngoài box model: nó không thêm vào kích thước phần tử và không đẩy các phần tử lân cận đi. Border là một phần của box model và thêm vào kích thước được render. Outline thường được sử dụng cho các vòng tiêu điểm (outline :focus-visible) nơi bạn muốn một chỉ báo có thể nhìn thấy mà không dịch chuyển layout. Border được sử dụng khi đường nên là một phần của cấu trúc phần tử. Đừng xóa outline: none mà không cung cấp một chỉ báo tiêu điểm thay thế; làm như vậy phá vỡ khả năng tiếp cận bàn phím.

Tại sao sử dụng các thuộc tính logic như margin-inline-start?

Các thuộc tính logic (margin-block-start, padding-inline, v.v.) thích nghi với hướng viết của tài liệu. Trong tiếng Anh (trái-sang-phải), margin-inline-start giống như margin-left. Trong tiếng Ả Rập hoặc tiếng Do Thái (phải-sang-trái), nó tự động trở thành margin-right. Đối với các trang hỗ trợ nhiều ngôn ngữ, các thuộc tính logic làm cho quốc tế hóa CSS tự động. Đối với các trang chỉ tiếng Anh, chúng tương đương về hiệu ứng nhưng báo hiệu ý định rõ ràng hơn: margin này ở đầu dòng văn bản hơn là margin này ở phía bên trái.

Làm thế nào để tôi tạo một hộp với tỷ lệ khung hình cố định?

Cách hiện đại là thuộc tính CSS aspect-ratio: aspect-ratio: 16/9 trên một div làm cho chiều cao của nó tự động là 9/16 chiều rộng của nó. Được hỗ trợ trong tất cả các trình duyệt hiện đại (2021+). Kỹ thuật legacy sử dụng padding-top như một phần trăm: một div với padding-top: 56.25% tạo ra tỷ lệ 16:9 (9/16 = 56.25%). Thủ thuật padding-top vẫn hoạt động nhưng cú pháp thuộc tính sạch hơn. Sử dụng aspect-ratio cho mã mới; hack legacy vẫn còn trong Tailwind và các công cụ khác cần hỗ trợ trình duyệt rộng.