box-sizing

Try it

box-sizing: content-box;
width: 100%;

box-sizing: content-box;
width: 100%;
border: solid #5b6dcd 10px;
padding: 5px;

box-sizing: border-box;
width: 100%;
border: solid #5b6dcd 10px;
padding: 5px;

<section id="default-example">
  <div id="example-element-parent">
    <p>Parent container</p>
    <div class="transition-all" id="example-element">
      <p>Child container</p>
    </div>
  </div>
</section>

#example-element-parent {
  width: 220px;
  height: 200px;
  border: solid 10px #ffc129;
  margin: 0.8em;
}

#example-element {
  height: 60px;
  margin: 2em auto;
  background-color: rgb(81 81 81 / 0.6);
}

#example-element > p {
  margin: 0;
}

Cú pháp

box-sizing: border-box;
box-sizing: content-box;

/* Global values */
box-sizing: inherit;
box-sizing: initial;
box-sizing: revert;
box-sizing: revert-layer;
box-sizing: unset;

Thuộc tính box-sizing được chỉ định là một từ khóa duy nhất được chọn từ danh sách các giá trị bên dưới.

Giá trị

content-box

Đây là giá trị ban đầu và mặc định theo tiêu chuẩn CSS. Các thuộc tính width và height bao gồm nội dung, nhưng không bao gồm padding, border hay margin. Ví dụ, .box {width: 350px; border: 10px solid black;} hiển thị một hộp rộng 370px.

Ở đây, kích thước của phần tử được tính như: width = chiều rộng của nội dung, và height = chiều cao của nội dung. (Border và padding không được tính vào phép tính.)

border-box

Các thuộc tính width và height bao gồm nội dung, padding và border, nhưng không bao gồm margin. Lưu ý rằng padding và border sẽ nằm bên trong hộp. Ví dụ, .box {width: 350px; border: 10px solid black;} hiển thị một hộp rộng 350px, với diện tích dành cho nội dung là 330px. Hộp nội dung không thể âm và được làm tròn về 0, khiến không thể sử dụng border-box để làm phần tử biến mất.

Ở đây, kích thước của phần tử được tính như: width = border + padding + chiều rộng của nội dung, và height = border + padding + chiều cao của nội dung.

Mô tả

Theo mặc định trong mô hình hộp CSS, width và height bạn gán cho một phần tử chỉ được áp dụng cho hộp nội dung của phần tử. Nếu phần tử có bất kỳ border hay padding nào, chúng sẽ được cộng thêm vào width và height để tính kích thước hộp được hiển thị trên màn hình. Điều này có nghĩa là khi bạn đặt width và height, bạn phải điều chỉnh giá trị để tính đến bất kỳ border hay padding nào có thể được thêm vào. Ví dụ, nếu bạn có bốn hộp với width: 25%;, nếu bất kỳ hộp nào có padding trái hoặc phải hoặc border trái hoặc phải, chúng mặc định sẽ không vừa trên một dòng trong giới hạn của container cha.

Thuộc tính box-sizing có thể được sử dụng để điều chỉnh hành vi này:

• content-box cho bạn hành vi sizing hộp CSS mặc định. Nếu bạn đặt chiều rộng của phần tử thành 100 pixel, thì hộp nội dung của phần tử sẽ rộng 100 pixel, và chiều rộng của bất kỳ border hay padding nào sẽ được cộng vào chiều rộng hiển thị cuối cùng, khiến phần tử rộng hơn 100px.

• border-box yêu cầu trình duyệt tính toán bất kỳ border và padding nào trong các giá trị bạn chỉ định cho chiều rộng và chiều cao của phần tử. Nếu bạn đặt chiều rộng của phần tử thành 100 pixel, 100 pixel đó sẽ bao gồm bất kỳ border hay padding nào bạn đã thêm, và hộp nội dung sẽ thu nhỏ lại để hấp thụ chiều rộng thêm đó. Điều này thường giúp dễ dàng định kích thước các phần tử hơn nhiều.

  box-sizing: border-box là kiểu dáng mặc định mà trình duyệt sử dụng cho các phần tử <table>, <select> và <button>, cũng như cho các phần tử <input> có type là radio, checkbox, reset, button, submit, color hay search.

Định nghĩa hình thức

Cú pháp hình thức

box-sizing = 
  content-box  |
  border-box   

Ví dụ

Kích thước hộp với content-box và border-box

Ví dụ này cho thấy cách các giá trị box-sizing khác nhau thay đổi kích thước hiển thị của hai phần tử giống hệt nhau.

HTML

<div class="content-box">Content box</div>
<br />
<div class="border-box">Border box</div>

CSS

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}

.border-box {
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

Kết quả

Đặc tả

Tương thích trình duyệt

Xem thêm

• CSS box model