[css] div 박스를 border 기준으로 맞추기

기본적으로 div 박스 크기를 만질때 width를 설정 할 경우 content를 기준으로 width가 결정된다

div 상자를 만들고 width를 주는 경우 border은 콘텐츠의 크기 + 패딩값의 크기 값이 되는 것이다

 

CSS 코드

 

.box{
      width: 100px;
      margin: 20px;
      padding: 20px;
      border: 1px;
      background-color: brown;
    }

box1의 경우에는 콘텐츠 영역 100px + padding 20+20 그리고 border 1+1px을 더해 보더의 값은 총 142가 된다

    .box{
      width: 100px;
      margin: 20px;
      padding: 20px;
      border: 1px;
      background-color: brown;
    }
    .box-sizing{
      box-sizing: border-box;
    }

box-sizing : border-box 코드를 추가한 박스의 box2의 경우 border가 기준이 되고 있기 때문에 border값이 100px이 된다.