[CSS] CSS 기본 박스 모델(Box Model)

CSS 박스 모델(Box Model)

크롬 브라우저에서 마우스 우클릭 -> 검사 또는 Ctrl + Shift + I 를 눌러서 나오는 개발자 도구에서 Elements 탭을 누르면 다음과 같은 박스 모델을 볼 수 있습니다. 

 

 

• content 영역

  : 글, 이미지, 비디오 등 실제 내용을 포함하는 영역

• padding 영역

  : 안쪽 여백; border와 content 사이의 영역

• border 영역

  : 테두리

• margin 영역

  : 바깥쪽 여백; 다른 태그까지의 거리

이때 padding, border, margin은 width에 포함되지 않기때문에 요소의 전체 width를 계산하려면 이를 포함시켜줘야 합니다. 

 

예제: width 구하기

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
}