CSS에서 요소의 너비와 높이를 설정하면 종종 요소가 실제 크기보다 크게 나타납니다. 기본적으로 요소의 너비와 높이에 패딩과 테두리가 추가된 다음 요소가 표시되기 때문입니다.
상자 크기 속성은 요소가 실제 크기보다 크게 나타나지 않도록 실제 너비와 높이로 요소의 패딩 및 테두리를 포함합니다. 이 속성을 사용하는 형식은 "box-sizing:box-border"입니다.
예시
다음 코드를 실행하여 텍스트를 정렬하고 동일한 너비로 상자를 선택할 수 있습니다. −
<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>