65. Box Sizing Trong CSS

Box Sizing trong CSS: Thuộc tính box-sizing trong CSS cho phép bạn xác định cách kích thước của một phần tử được tính toán, bao gồm cả padding và border hoặc chỉ content. Thuộc tính này quan trọng khi bạn đang làm việc với các phần tử có padding và border, giúp bạn quản lý kích thước của phần tử một cách chính xác. Có hai giá trị cơ bản cho box-sizing: content-box và border-box.

content-box: Kích thước của phần tử chỉ tính toán từ nội dung bên trong, không bao gồm padding và border.
border-box: Kích thước của phần tử tính toán cả nội dung, padding và border.

Dưới đây là một ví dụ minh họa về cách sử dụng box-sizing:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .content-box-example {
      width: 200px;
      padding: 20px;
      border: 2px solid #333;
      box-sizing: content-box;
    }

    .border-box-example {
      width: 200px;
      padding: 20px;
      border: 2px solid #333;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="content-box-example">
    <p>This is some content.</p>
  </div>

  <div class="border-box-example">
    <p>This is some content.</p>
  </div>
</body>
</html>

Trong ví dụ này:

Chúng ta tạo hai phần tử với các class .content-box-example và .border-box-example.
Sử dụng thuộc tính width để xác định kích thước của phần tử.
Sử dụng padding để thêm padding cho phần tử.
Sử dụng border để thêm viền cho phần tử.
Sử dụng box-sizing để xác định cách kích thước được tính toán. Trong ví dụ này, box-sizing: content-box; và box-sizing: border-box; được sử dụng lần lượt.

Khi bạn sử dụng box-sizing: content-box;, kích thước của phần tử bao gồm cả padding và border, làm cho phần tử trở nên lớn hơn so với kích thước xác định. Khi bạn sử dụng box-sizing: border-box;, kích thước của phần tử chỉ tính toán từ nội dung, padding và border không làm tăng kích thước.

Leave a Comment Cancel Reply