[CSS] box-sizing

어느 날 css 파일 속 box-sizing 역할이 궁금하여 알아보았습니다.

* {
	box-sizing: border-box;
  }

content-box(default)

box-sizing값을 content-box(default)로 설정하면 박스의 width를 content의 길이만큼 설정하고,

box-sizing값을 border-box로 설정하면 width를 border*2 + padding*2 + content의 길이로 설정 가능하여 css작업 시 더 편하게 width값을 설정할 수 있습니다.

 

Example

    <h2 style="background-color: #a23222; width:100px; height: 100px; border:5px solid black;">s</h2>

5 + 90 + 5

box-sizing: border-box;

width를 100으로 설정하고 border를 5로 설정했지만, border-box를 기준으로 하기때문에 content사이즈가 자동으로 90이 됩니다.

 

5 + 100 +5

box-sizing: content-box;

여기서도 width를 100으로 설정하고 border를 5로 설정했지만 content-box가 기준이기 때문에 content사이즈에 100이 부여됩니다.