#6.12 Border Box

box예시

width가 200px인 연두색깔 box를 하나 만들었다고 하자

여기에 padding-left: 50px라고 하면 전체 박스의 크기는 대략 250px이 된다. 

왜냐면 박스의크기 = 컨테츠(200px) + 패딩 + 테두리두께  이기때무인다.

 

아래의 코드를 보자 

.nav__list {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 20px 50px;
  background-color: #f9f9fa;
}

 

이 css의 문제점은 width를 100%로 하여 브라우저 크기에 딱맞게 했다.

그런데 padding을 추가적으로 지정하여 스타일을 지정한 box가 짤려져 보이게한다.

박스의 width 크기: 100% + 50px + 테두리 두께 이기 때문이다. 

 

이를 해결하기 위해 

 box-sizing: border-box;을 추가해줘야한다.

이렇게 하면 박스의 width 크기: 가로 + 50px + 테두리두께 = 100%로 해주기 때문에 박스가 화면에 잘리지 않게 해준다.