Mô hình hộp CSS hoạt động như thế nào: Hướng dẫn trực quan về bố cục CSS trên trang

Mỗi phần tử trên một trang web đều chiếm một vùng hình chữ nhật. Ngay cả văn bản có vẻ tự do chảy cũng được tạo thành từ các hộp dòng, và mọi tiêu đề, hình ảnh, nút bấm hay đoạn văn đều nằm trong một hộp cấp khối hoặc cấp nội dòng của riêng nó. Hiểu cấu trúc này là nền tảng của bố cục CSS vì nó giải thích tại sao các phần tử chiếm không gian, tại sao chúng cách nhau, và tại sao việc thay đổi đơn giản một giá trị width có thể làm tràn hàng.

Bốn lớp của một hộp

Mô hình hộp CSS mô tả mỗi phần tử như một tập hợp các lớp lồng nhau. Ở trung tâm là vùng nội dung: văn bản, hình ảnh hoặc các phần tử con mà hộp chứa. Bao quanh nội dung là đệm (padding), một không gian bên trong đẩy viền ra xa nội dung. Bên ngoài đệm là viền (border), tạo ra đường viền nhìn thấy được của hộp. Cuối cùng, lề (margin) là không gian bên ngoài giữa hộp này và các hộp lân cận.

Các lớp này phục vụ các mục đích khác nhau. Đệm thuộc về bản thân phần tử và thường giữ cho nội dung không chạm vào mép của nó. Viền thuộc về thiết kế hình ảnh của phần tử. Lề thuộc về mối quan hệ giữa các phần tử, tạo ra sự tách biệt mà không thay đổi diện mạo của bất kỳ hộp nào.

Một ví dụ trực quan đơn giản

Hãy tưởng tượng một thẻ bài viết có 20 pixel chiều rộng nội dung ở mỗi bên, 16 pixel đệm, viền 2 pixel và lề 12 pixel. Bên trong thẻ, văn bản bắt đầu cách viền 16 pixel. Viền nằm cách nội dung 16 pixel. Thẻ tiếp theo bắt đầu cách viền của thẻ này 12 pixel. Mỗi lớp có một mục đích riêng biệt, và việc loại bỏ một lớp sẽ thay đổi cấu trúc chứ không chỉ đơn thuần là trang trí.

Khi bạn kiểm tra một phần tử trong trình duyệt, sơ đồ mô hình hộp thường hiển thị các kích thước này cùng nhau. Đọc nó từ trong ra ngoài giúp bạn dự đoán phần tử sẽ chiếm bao nhiêu không gian và các mép nhìn thấy của nó sẽ nằm ở đâu.

Cách các phép tính kích thước cộng dồn

Không gian tổng thể mà một phần tử chiếm không đơn giản là width được khai báo. Trong mô hình content-box tiêu chuẩn, các thuộc tính width và height chỉ áp dụng cho vùng nội dung. Đệm và viền được cộng thêm bên ngoài vùng đó.

Đối với một hộp theo chiều ngang, tổng chiều rộng bên ngoài trước khi tính lề là:

chiều rộng nội dung + đệm trái + đệm phải + viền trái + viền phải

Lề sau đó được cộng thêm bên ngoài kết quả đó để tìm khoảng cách từ mép ngoài của phần tử đến bố cục xung quanh. Sự khác biệt này quan trọng khi nhiều hộp chia sẻ một hàng. Nếu mỗi phần tử con rộng hơn không gian sẵn có sau khi tính đệm và viền, hàng sẽ xuống dòng hoặc tràn.

Xem xét một cột có width khai báo là 300 pixel, 24 pixel đệm ngang ở mỗi bên và viền 1 pixel ở mỗi bên. Hộp nội dung của nó rộng 300 pixel, nhưng hộp viền rộng 350 pixel: 300 + 24 + 24 + 1 + 1. Nếu hai cột như vậy nằm trong một vùng chứa rộng 700 pixel, chúng cần tổng cộng 700 pixel, không còn chỗ cho khoảng cách giữa chúng. Bố cục trông đúng khi xét riêng lẻ nhưng lại sai trong ngữ cảnh.

box-sizing thay đổi câu hỏi

Thuộc tính box-sizing thay đổi hộp mà các giá trị width và height mô tả. Giá trị mặc định, content-box, đo vùng nội dung. Giá trị thay thế, border-box, bao gồm nội dung, đệm và viền trong các kích thước được khai báo.

Với border-box, một hộp có width khai báo là 300 pixel vẫn giữ nguyên 300 pixel ở mép viền ngoài, ngay cả khi đệm và viền được cộng thêm. Vùng nội dung trở nên nhỏ hơn để nhường chỗ cho các lớp đó. Hành vi này thường dễ suy luận hơn khi xây dựng lưới, thanh bên và các thành phần responsive vì kích thước bên ngoài luôn có thể dự đoán được.

Border-box không làm cho đệm hay viền trở nên miễn phí. Nó chỉ thay đổi nơi phép đo bắt đầu. Một hộp có width cố định và đệm lớn vẫn có thể rất ít chỗ cho văn bản, vì vậy nội dung có thể xuống dòng thường hơn hoặc bị chật chội. Phép tính vẫn diễn ra; nó chỉ được hấp thụ bên trong kích thước được khai báo.

Chọn chiến lược kích thước

Nhiều dự án áp dụng box-sizing: border-box rộng rãi để giúp kiểm soát kích thước thành phần dễ dàng hơn. Ngay cả với quy ước này, việc tính toán không gian nội dung thực tế trước khi chọn đệm vẫn rất hữu ích. Một thói quen tốt là đặt hai câu hỏi: kích thước bên ngoài của phần tử là bao nhiêu, và bao nhiêu không gian phải dành cho nội dung?

Đối với các phần tử có chiều cao cố định, cùng một logic áp dụng theo chiều dọc. Đệm, viền và nội dung phải vừa với chiều cao đã chọn, nếu không nội dung sẽ bị tràn. Đối với các phần tử mà chiều cao nên theo nội dung, việc để trình duyệt tính toán chiều cao thường an toàn hơn là ép một giá trị.

Nơi lề hoạt động khác biệt

Lề không thêm không gian hình ảnh bên trong một phần tử; chúng tách nó khỏi các hộp liền kề. Lề dọc giữa các phần tử cấp khối có thể bị gộp lại. Khi hai lề gặp nhau, cái lớn hơn có thể thắng thay vì cả hai khoảng cách cộng lại. Đây là lý do tại sao khoảng cách đoạn văn trong CSS có thể trông khác với phép cộng đơn giản của lề trên và dưới.

Hiện tượng gộp lề không xảy ra trong mọi trường hợp. Nó có thể bị ảnh hưởng bởi đệm, viền, vị trí, bố cục flex và bố cục grid. Trong các vùng chứa flex và grid, các phần tử được đặt theo quy tắc của vùng chứa, vì vậy các khoảng cách bên ngoài bạn thấy thường được kiểm soát bởi các thuộc tính gap cũng như lề.

Lề âm cũng có thể xảy ra. Chúng có thể kéo các hộp lại gần nhau hoặc dịch chuyển một phần tử, nhưng chúng không loại bỏ cấu trúc hộp cơ bản. Chúng thay đổi mối quan hệ giữa các hộp chứ không làm thu nhỏ lớp nội dung, đệm hay viền.

Cách tính kích thước thay đổi cấu trúc trang

Các quyết định về kích thước ảnh hưởng đến toàn bộ trang, không chỉ một thành phần. Nếu một header, danh sách điều hướng và cột nội dung mỗi cái sử dụng width content-box có vẻ hợp lý khi xét riêng, tổng kích thước kết hợp của chúng có thể vượt quá vùng hiển thị. Việc thêm đệm cho một thẻ có thể khiến lưới xuống dòng ngoài ý muốn. Chuyển sang border-box có thể ổn định các kích thước bên ngoài, nhưng nội dung bên trong vẫn cần đủ không gian.

Bố cục responsive làm điều này rõ ràng hơn. Một thiết kế hai cột có thể trở thành một cột khi chiều rộng sẵn có quá nhỏ cho cả hai hộp, đệm, viền và khoảng cách của chúng. Điểm ngắt không chỉ về chiều rộng màn hình; nó về tổng chiều rộng mà các hộp và khoảng cách giữa chúng yêu cầu.

Một kiểm tra thực tế

Khi bố cục không vừa, hãy kiểm tra từng phần tử một. Xác nhận xem width được khai báo đề cập đến hộp nội dung hay hộp viền. Cộng đệm ngang và viền để tìm chiều rộng bên ngoài. Bao gồm lề và khoảng cách để tìm không gian cần thiết trong hàng. Sau đó so sánh tổng đó với chiều rộng sẵn có của vùng chứa.

Quy trình này biến những bất ngờ về bố cục thành các quyết định có thể đo lường được. Mô hình hộp CSS không chỉ là một sơ đồ trong công cụ dành cho nhà phát triển; nó là tập hợp các quy tắc xác định cách nội dung, đệm, viền và lề kết hợp để tạo nên hình dạng của một trang.