Trong hướng dẫn này, bạn sẽ tìm hiểu cách các yếu tố được trình bày trực quan trên các trang web.

Box Model là gì?

    Mỗi phần tử có thể được hiển thị trên một trang web bao gồm một hoặc nhiều hộp hình chữ nhật. Box Model CSS thường mô tả cách các hộp hình chữ nhật này được bố trí trên trang web. Các hộp này có thể có các thuộc tính khác nhau và có thể tương tác với nhau theo những cách khác nhau, nhưng mỗi hộp đều có một vùng nội dung và các vùng đệm , đường viền và lề tùy chọn xung quanh.

    Sơ đồ sau đây minh họa cách các thuộc tính CSS chiều rộng, chiều cao, phần đệm, đường viền và lề xác định lượng không gian mà một phần tử có thể chiếm trên một trang web.

    Phần đệm là khoảng trong suốt giữa nội dung của phần tử và đường viền của nó (hoặc cạnh của hộp, nếu nó không có đường viền), trong khi lề là khoảng trong suốt xung quanh đường viền.

    Ngoài ra, nếu một phần tử có màu nền , nó sẽ hiển thị qua vùng đệm của nó. Vùng lề luôn trong suốt, nó không bị ảnh hưởng bởi màu nền của phần tử, tuy nhiên, nó làm cho màu nền của phần tử cha được nhìn xuyên qua nó.

Chiều rộng và chiều cao của các phần tử

    Thông thường, khi bạn đặt chiều rộng và chiều cao của một phần tử bằng các thuộc tính width và height, trên thực tế, bạn chỉ đặt chiều rộng và chiều cao của vùng nội dung của phần tử đó. Chiều rộng và chiều cao thực tế của hộp phần tử phụ thuộc vào một số yếu tố.

    Không gian thực mà hộp của phần tử có thể chiếm trên một trang web được tính như sau:

    Bạn sẽ tìm hiểu chi tiết về từng thuộc tính CSS này trong các chương sắp tới.

    Bây giờ, hãy thử ví dụ sau để hiểu Box Model thực sự hoạt động như thế nào:

div {
    width: 300px;
    height: 200px;
    padding: 15px; /* set padding for all four sides */
    border: 10px solid black; /* set border for all four sides */
    margin: 20px auto; /* set top and bottom margin to 20 pixels, and left and right margin to auto */
}