CSS 박스 모델

소위 상자 모델은 html 요소를 상자로 처리합니다. 일상생활에서 상자는 가장 흔한 물건이다. 예를 들어 월병 상자에는 외부 포장 상자가 있고 내부에는 일반 철제 상자가 있으며 내부에는 플라스틱 또는 종이 포장이 들어 있습니다. 큰 상자에는 여러 개의 작은 패키지가 들어 있습니다. 마찬가지로 HTML의 각 태그는 모양의 상자로 간주되며 태그 간의 관계는 상자 대 상자 관계로 간주될 수 있습니다.

박스 모델은 다음으로 구성됩니다: 콘텐츠: 요소가 표시해야 하는 내용

패딩: 콘텐츠와 테두리 사이의 거리

테두리(border)

　　　　　여백: 상자 사이의 거리

width, height 속성은 요소의 너비, 높이가 아닌 콘텐츠(content)의 너비, 높이 속성입니다.

요소의 너비 = 왼쪽 여백 + 왼쪽 테두리 + 왼쪽 패딩 + 너비 + 오른쪽 패딩 + 오른쪽 테두리 + 오른쪽 여백

요소의 높이 = 상단 여백 + 상단 테두리 + 상단 패딩 + 높이 + 하단 패딩 + 하단 테두리 + 하단 여백

위 수식을 통해 각 Edge의 속성을 별도로(시계방향) 설정할 수 있음을 유추할 수 있습니다.

예: padding:10px; (padding:10px 10px 10px 10px; 설정과 동일)

　padding:10px 20px; (동일: padding:10px 20px 10px 20px;)

　padding:10px 15px 20px; (동일: padding:10px 15px 20px 15px;)

다른 여백과 테두리에도 동일하게 적용됩니다.