CSS_box-sizing 속성 (border-box, content-box)

기본 박스 사이즈 속성을 정리해보았다.

 

 

기본 content 위에 padding값, border값, margin값이 더해진다.

 

 

 

border-box: content-box  속성

예를 들어 다음 값을 주었을 때

width : 200px;

heigh : 100px;

padding : 20px;

border : 5px solid #000;

box-sizing : content-box;

content-box

 

기본적으로 box-sizing값은 content-box으로 되어있다.

그래서 content값 너비와 높이 넘어 padding값과 border값이 더해서 전체적인 너비와 높이값이 커진다.

 

 

★★만약 css에서 width값을 100%를 준다면, 부모의 너비와 같아진다.

box-sizing이 content-box인 상황에서 padding, margin, border값을 준다면 부모의 너비를 초과하니,

화면이 깨지지 않도록 주의!!★★

 

 

 

border-box: border-box 속성

다음 값을 주었을 때

width : 200px;

heigh : 100px;

padding : 20px;

border : 5px solid #000;

box-sizing : border-box;

 

box-sizing:border-box

border-box는 width값과 height값 이 테두리가 되어 padding, border, margin값을 줘도 안쪽으로 들어가 레이아웃 너비와 높이값을 정할 수 있다.

 

 

▶ content-box와 border-box 비교