Kích thước hộp

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 39 trên 76.

Trong CSS, box-sizing là một thuộc tính xác định cách tính tổng chiều rộng và chiều cao của một phần tử. Theo mặc định, các thuộc tính width và height chỉ bao gồm kích thước nội dung, không tính phần đệm, đường viền hoặc lề. Tuy nhiên, bạn có thể thay đổi cách hoạt động này bằng thuộc tính box-sizing, để các thuộc tính width và height cũng bao gồm kích thước phần đệm và đường viền.

Điều này có thể giúp đơn giản hóa việc tính toán bố cục và ngăn các vấn đề về kích thước ngoài dự kiến.

Đây là cú pháp cơ bản để sử dụng thuộc tính box-sizing:

selector {
    box-sizing: value;
}

value: Hành vi box-sizing mong muốn, có thể là một trong những giá trị sau:

content-box: Đây là giá trị mặc định. Các thuộc tính width và height chỉ bao gồm kích thước nội dung. Phần đệm, đường viền và lề nằm ngoài chiều rộng và chiều cao đã chỉ định.

border-box: Các thuộc tính width và height bao gồm kích thước nội dung, phần đệm và đường viền. Lề vẫn nằm bên ngoài phần tử.

Ví dụ:

div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box; /* Hành vi mặc định */
}

.container {
    width: 400px;
    height: 300px;
    padding: 30px;
    border: 10px solid red;
    box-sizing: border-box;
}

Trong ví dụ này, phần tử <div> có giá trị box-sizing là content-box. Điều này có nghĩa là chiều rộng thực tế khi hiển thị của <div> sẽ là 300px (nội dung) + 40px (phần đệm bên trái và bên phải) + 10px (đường viền bên trái và bên phải) = 350px. Chiều cao cũng được tính tương tự.

Ngược lại, phần tử có lớp container có giá trị box-sizing là border-box. Trong trường hợp này, width được chỉ định là 400px sẽ bao gồm nội dung, phần đệm và đường viền. Vùng nội dung thực tế sẽ thu nhỏ để phù hợp với phần đệm và đường viền, dẫn đến chiều rộng nội dung là 400px - 60px (phần đệm bên trái và bên phải) - 20px (đường viền bên trái và bên phải) = 320px. Chiều cao cũng sẽ được tính tương tự.

Thử thách

Dễ

Bạn được cung cấp một tài liệu HTML có hai phần tử <div>, mỗi phần tử có một lớp khác nhau. Nhiệm vụ của bạn là dùng thuộc tính box-sizing để kiểm soát cách tính chiều rộng và chiều cao của các phần tử này. Hãy làm theo các bước dưới đây:

Viết quy tắc CSS nhắm đến phần tử <div> có lớp content-box-div. Đặt width thành 300px, height thành 200px, padding thành 20px, border thành 5px solid blue và box-sizing thành content-box.
Viết quy tắc CSS nhắm đến phần tử <div> có lớp border-box-div. Đặt width thành 300px, height thành 200px, padding thành 20px, border thành 5px solid red và box-sizing thành border-box.

Tự làm thử

<html>
<head>
    <title>Box Sizing</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="content-box-div">This is a div with content-box.</div>
    <div class="border-box-div">This is a div with border-box.</div>
</body>
</html>