[CSS] box-sizing

 

📌 box-sizing

: 요소의 너비와 높이를 계산하는 방법을 지정

 

- content-box : 요소의 설정된 너비에 + 테두리와 안쪽 여백이 더해진다.

• 기본값(default)
• width와 height 속성에 콘텐츠 영역만 포함, 안팎 여백과 테두리는 포함하지 않는다. 
  (ex. box {width: 350px; border: 10px solid black;}을 적용한 요소의 너비(width) = 370px)
• 요소의 크기: 너비 = 콘텐츠 너비, 높이 = 콘텐츠 높이
  테두리와 안쪽 여백은 식에 포함하지 않는다.
  
  

- border-box : 테두리와 안쪽 여백을 추가하면 콘텐츠 영역이 줄어든다.

• width와 height 속성에 안쪽 여백과 테두리는 포함, 바깥 여백은 포함하지 않는다. 
• 안쪽 여백과 테두리가 요소 상자 안에 위치함
  (ex. box {width: 350px; border: 10px solid black;}을 적용한 요소의 너비 (width) = 350px)
• 요소의 크기: 너비 = 테두리 + 안쪽 여백 + 콘텐츠 너비, 높이 = 테두리 + 안쪽 여백 + 콘텐츠 높이
• 사용하기 쉽다 👉 reset을 이용하는 이유 (content-box가 기본값이기 때문에 reset을 통해 border-box로 바꾸어 사용한다.)
• border-box가 default인 html 태그 🟰 <button>
  
  

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}

.border-box {
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

 

 

---

참고

 

box-sizing - CSS: Cascading Style Sheets | MDN