width 속성

percent

부모 요소의 width에 상대적인 크기를 지정합니다.

width는 content 영역의 너비를 제어할 때 사용하는데 이때 auto가 아닌 특정한 값을 지정하여 사용하면,

그 크기는 box model 영역에서 margin 영역을 제외한 모든 영역에 대해 영향을 받습니다. (content, padding, border) 

예를 들어,

.box { width: 100px;

       padding: 20px;

       border: 10px solid black;

}

100px content + ( 20px * 2) padding + ( 10px * 2 ) border = 160px 가 된 것입니다. 

또한, width는 %를 이용해서도 크기를 지정할 수 있습니다.

 

.parent { width: 300px;

            border: 20px solid red; }

.child { width: 50%;

        padding: 20px;

        border: 10px solid black;

}

 

정답은 210px 입니다.

우선, padding (20px * 2) + border (10px * 2) = 60px 입니다.

210px - 60px = 150px 이며, 150px은 부모의 width가 300px이므로 300px의 50%인 150px이 width값으로 결정된 것입니다.

결국 %값일 때에는 부모의 width값에 대해서 계산되어지는데,

이때 부모의 width는 content 영역의 크기를 의미합니다.

부모의 padding과 border까지 더해진 요소의 전체 크기가 아닌, content 영역의 크기가 기준이라는 것을 기억하시면 됩니다.