박스 모델

너비에 관해 이야기하는 김에 너비와 관련해서 반드시 알아둬야 할 박스 모델에 대해 이야기하겠습니다. 엘리먼트의 너비를 설정할 경우 해당 엘리먼트는 실제로 여러분이 설정한 것보다 크게 나타날 수 있습니다. 이것은 엘리먼트의 테두리와 패딩이 지정된 너비 이상으로 엘리먼트를 늘리기 때문입니다. 다음 예제를 보시면 너비값을 동일하게 설정했는데도 결과적으로 크기가 다릅니다. 

.simple {
  width: 500px;
  margin: 20px auto;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border-width: 10px;
}
<div class="simple">

저는 더 작습니다...

</div>
<div class="fancy">

그리고 전 더 커요!

</div>

오랫동안 이 문제의 해법은 너비값을 조절하는 것이었습니다. CSS 코드를 작성하는 사람들은 패딩과 테두리를 빼는 식으로 늘 원하는 것보다 작은 너비값을 지정해왔습니다. 다행히도 이제 더는 그렇게 하지 않아도 됩니다.

  • Creative Commons License