[css] box-sizing

box-sizing

• 테두리와 패딩까지 포함한 가로, 세로 길이를 지정해주는 속성.
• 기본값은 content-box이다.

/* css */
.div1 {
  box-sizing: border-box;
  border: 10px solid red;
  width: 300px;
  height: 200px;
  margin-bottom: 50px;
}

.div2 {
  box-sizing: border-box;
  border: 10px solid red;
  width: 300px;
  height: 200px;
  padding: 40px;
}

<!-- html -->
<div class="div1">Hello World!</div>
<div class="div2">Hello World!</div>

Hello World!

Hello World!

 

border-box를 추가하여 테두리와 패딩까지 포함하여 가로 300px, 세로 200px로 크기가 지정되었다.

 

 

모든 요소에 border-box를 추가하는 법

* {
  box-sizing: border-box;
}