Khi chúng ta đặt chiều rộng và chiều cao của một phần tử trong CSS thì phần tử đó thường xuất hiện lớn hơn kích thước thực. Điều này là do theo mặc định, phần đệm và đường viền được thêm vào chiều rộng và chiều cao của phần tử và sau đó phần tử được hiển thị.
Thuộc tính kích thước hộp bao gồm phần đệm và đường viền của phần tử có chiều rộng và chiều cao thực tế để phần tử không xuất hiện lớn hơn kích thước thực. Định dạng để sử dụng thuộc tính này là “box-sizing:box-border”
Ví dụ
Bạn có thể thử chạy mã sau để căn chỉnh văn bản và chọn các hộp có cùng chiều rộng -
Nhập<html>
<head>
<style>
input, select {
width: 250px;
border: 2px solid #000;
padding: 0;
margin: 0;
height: 22px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input {
text-indent: 3px;
}
</style>
</head>
<body>
<input type = "text" value = "Name of Candidate"><br>
<select>
<option>Select Choice</option>
<option>Student</option>
<option>Teachers</option>
<option>Head</option>
</select>
</body>
</html>