Thuộc tính boxSizing trong HTML DOM Style

Thuộc tính boxSizing xác định cách tính toán tổng chiều rộng và chiều cao của phần tử. Có 2 giá trị chính: content-box (mặc định) và border-box.

Cú pháp

object.style.boxSizing = "content-box|border-box|initial|inherit"

Giá trị tham số

Giá trị	Mô tả
content-box	Mặc định. Padding và border được CỘNG THÊM vào width/height nội dung. Kích thước thực = width + padding + border
border-box	Width/height bao gồm padding và border. Nội dung co lại nếu có padding/border. Kích thước thực = width (giữ nguyên)
initial	Giá trị mặc định
inherit	Kế thừa từ phần tử cha

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
<style>
  #DIV1 {
    height: 100px;
    width: 350px;
    border: 30px solid lightpink;
    box-sizing: border-box;
  }
</style>
<script>
  function changeBoxSizing() {
    document.getElementById("DIV1").style.boxSizing = "content-box";
    document.getElementById("Sample").innerHTML = "Box sizing đã thay đổi thành content-box";
  }
</script>
</head>
<body>
<div id="DIV1">ĐÂY LÀ VĂN BẢN MẪU BÊN TRONG DIV. HELLO WORLD DIV.</div>
<p>Thay đổi box-sizing của div trên bằng cách nhấn nút dưới đây</p>
<button onclick="changeBoxSizing()">Thay đổi Box Sizing</button>
<p id="Sample"></p>
</body>
</html>

Kết quả

Ban đầu border-box: width 350px bao gồm border 30px → content width = 290px. Sau khi chuyển content-box: width 350px chỉ cho content, border 30px cộng thêm → tổng width = 410px. Div to ra rõ rệt.


Best practice: Dùng box-sizing: border-box toàn trang (via * { box-sizing: border-box; }) để layout dễ dự đoán hơn.