Mô hình hộp CSS

Cách làm việc với CSS Box Model

Mỗi phần tử CSS về cơ bản là một hộp. Mỗi phần tử là một hộp chung.

Mô hình hộp giải thích kích thước của các phần tử dựa trên một vài thuộc tính CSS.

Từ bên trong ra bên ngoài, chúng tôi có:

  • khu vực nội dung
  • đệm lót
  • biên giới
  • lề

Cách tốt nhất để hình dung mô hình hộp là mở DevTools của trình duyệt và kiểm tra cách nó được hiển thị:

Tại đây, bạn có thể thấy cách Firefox cho tôi biết các thuộc tính của mộtspanphần tử tôi đã đánh dấu. Tôi nhấp chuột phải vào nó, nhấn Kiểm tra phần tử và đi tới bảng điều khiển Bố cục của DevTools.

Hãy xem, không gian màu xanh nhạt là vùng nội dung. Bao quanh nó là phần đệm, sau đó là đường viền và cuối cùng là lề.

Theo mặc định, nếu bạn đặt chiều rộng (hoặc chiều cao) trên phần tử, điều đó sẽ được áp dụng chokhu vực nội dung. Tất cả các tính toán đệm, đường viền và lề đều được thực hiện bên ngoài giá trị, vì vậy bạn phải lưu ý điều này khi thực hiện tính toán của mình.

Bạn có thể thay đổi hành vi này bằng cách sử dụng Kích thước hộp.

Tải xuống miễn phí của tôiSổ tay CSS


Các hướng dẫn css khác: