박스 모델 구성 요소
-
border - 테두리
-
width / height - 너비 / 높이
-
padding - 안쪽 여백
-
margin - 바깥쪽 여백
블럭 태그 vs 인라인 태그 너비/높이 정책
블럭 태그 기본 정책
-
너비: 부모 영역을 꽉 채움 (100%)
-
높이: 내용물의 높이와 동일
블럭 태그 명시적 지정
-
너비: 지정한 수치로 설정 가능
-
높이: 지정한 수치로 설정 가능
인라인 태그 기본 정책
-
너비: 내용물의 너비와 동일
-
높이: 내용물의 높이와 동일
인라인 태그 명시적 지정
-
너비: 지정 불가
-
높이: 지정 불가
(예외: img 태그는 인라인이지만 너비/높이 지정 가능)
padding (안쪽 여백)
- 테두리와 내부 내용물 사이의 간격 가독성 향상을 목적으로 사용
margin (바깥쪽 여백)
- 테두리와 외부 요소 사이의 간격 요소 배치를 목적으로 사용
[ margin ]
[ [ border ] ]
[ [ [ padding ] ] ]
[ [ [ content ] ] ]
[ [ ] ] ]