Mở rộng phần tử trong CSS cho JavaScript

Việc đặt các thuộc tính CSS width và height không đảm bảo rằng phần tử sẽ có kích thước được chỉ định. Hãy xem xét các ví dụ.

Ví dụ

Bây giờ kích thước phần tử trùng khớp với kích thước được đặt:

<div id="elem">
	text
</div>

#elem {
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
}

Ví dụ

Và bây giờ hãy đặt cho phần tử thuộc tính padding. Kết quả là chiều rộng thực tế của phần tử sẽ trở thành lớn hơn và mở rộng theo giá trị được đặt của khoảng đệm bên trong:

<div id="elem">
	text
</div>

#elem {
	padding: 25px;
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
}

Ví dụ

Việc có đường viền cũng mở rộng phần tử:

<div id="elem">
	text
</div>

#elem {
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
	border: 20px solid #F0D7A1;
}

Ví dụ

Thuộc tính box-sizing cho phép thay đổi hành vi được mô tả ở trên. Có thể làm sao cho cả khoảng đệm bên trong lẫn đường viền đều không mở rộng phần tử. Để làm điều này, cần phải đặt cho thuộc tính này giá trị border-box:

<div id="elem">
	text
</div>

#elem {
	box-sizing: border-box;
	padding: 20px;
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
	border: 20px solid #F0D7A1;
}

Tầm quan trọng của điều được mô tả

Từ góc nhìn của JavaScript, tình huống được mô tả không thuận tiện lắm. Bởi vì hóa ra, sau khi đọc giá trị của thuộc tính width, chúng ta hoàn toàn không thể chắc chắn rằng phần tử sẽ có đúng chiều rộng đó.