얼죽아의 일상블로그

박스는 콘텐츠영역, 패딩영역, 보더, 마진영역으로 크게 나뉜다. 전체 넓이를 지정해줬을때는 콘텐츠영역 + 패딩영역 + 보더영역까지만의 길이가 계산된다 (마진값은 들어가지 않음) 왼쪽의 그림과 오른쪽 그림에는 width값, height값, padding값, border값이 동일하게 주어졌지만 실제로 크롬에서 확인을 해보면 왼쪽모델은 콘텐츠 값만 300이고 오른쪽모델은 보더값(5+5) + 패딩값(15+15) 이 빠진 260이 된 것을 알 수 있다. (300-10-30 = 260) 둘의 차이점은 바로 box-sizing에 border-box를 주었다는 것이다. 디폴트값인 content-box 대신 border-box를 주게 되면 보더+패딩+콘텐츠 영역이 합쳐진 값이 자동으로 계산되어 나온다. 쉽지만 헷갈리는 ..