CSS에서 요소의 너비(width)와 높이(height)를 설정했는데도 실제 크기보다 더 크게 표시되는 경우가 종종 있습니다. 그 이유는 기본적으로 패딩(padding)과 테두리(border)가 요소의 지정된 너비와 높이에 추가된 후 화면에 렌더링되기 때문입니다.
box-sizing 속성으로 해결하기
box-sizing 속성을 사용하면 패딩과 테두리가 실제 너비와 높이 값 안에 포함되므로, 요소가 의도한 크기보다 커지는 문제를 방지할 수 있습니다. 이 속성의 기본 사용 형식은 다음과 같습니다.
box-sizing: border-box;
border-box 값을 적용하면 요소의 전체 크기(콘텐츠 + 패딩 + 테두리)가 지정한 너비와 높이 안에 유지됩니다. 참고로 구형 Firefox 브라우저 호환성을 위해 -moz-box-sizing, 구형 Safari 및 Chrome을 위해 -webkit-box-sizing 접두사를 함께 사용하는 것이 좋습니다.
예제 코드
아래 코드를 실행하면 텍스트 입력창(input)과 선택 상자(select)를 동일한 너비로 정렬할 수 있습니다.
<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>코드 설명
- width: 250px; — input과 select 요소 모두 동일한 너비인 250px로 설정합니다.
- border: 2px solid #000; — 두 요소에 검은색 2px 테두리를 적용해 시각적으로 일관성을 맞춥니다.
- padding: 0; margin: 0; — 불필요한 내부 여백과 외부 여백을 제거합니다.
- height: 22px; — 두 요소의 높이를 동일하게 맞춥니다.
- box-sizing: border-box; — 테두리와 패딩이 너비 계산에 포함되어 두 요소가 정확히 같은 크기로 표시됩니다.
이처럼 box-sizing: border-box를 활용하면 폼 요소들의 크기를 일관성 있게 유지할 수 있어, 깔끔하고 정돈된 UI를 만드는 데 매우 유용합니다.