CSS : box-sizing

CSS : box-sizing

---

box-sizing

• 요소의 너비(width)와 높이(height)를 계산하는 방법을 지정한다.
• 높이와 너비가 같더라도 box-sizing 속성 값에 따라 크기가 달라질 수 있다.
• content-box가 기본값이다.

 

---

 

content-box 

• 요소의 너비와 높이를 정의했을 때 콘텐츠 영역에 대해서만 값을 정의한다.
• padding이나 margin을 추가할 때 요소가 커져도 콘텐츠 크기는 확보하는 형태로 너비와 높이를 지정하고 싶을 때 사용

* {
    box-sizing: content-box;
}

div {
    width: 100px;
    height: 100px;
    background-color: #ffffb5;
    border: 1px solid black;
}

 

 

---

border-box

• 너비(width)와 높이(height) 안에 모든 영역이 포함된다.
• padding이나 border가 커짐으로써 요소가 커지는 현상을 막을 수 있다.
• 너비와 높이를 일일이 계산하지 않고 절대적인 요소의 크기를 정하고 싶을 때 사용한다.

* {
    box-sizing: border-box;
}

div {
    width: 100px;
    height: 100px;
    background-color: #ffffb5;
    border: 1px solid black;
}

 

---

정리

• box-sizing의 기본값은 content-box이다.
• 박스모델에 너비와 높이를 지정하면 콘텐츠의 크기가 결정된다.

CSS : Box Model (박스 모델)

• box-sizing을 border-box로 지정하면 테두리까지 너비와 높이에 포함된다.