CSS 박스 모델 정리

박지명·2026년 2월 23일

클라이언트

목록 보기
9/24

박스 모델 구성 요소

  • border - 테두리

  • width / height - 너비 / 높이

  • padding - 안쪽 여백

  • margin - 바깥쪽 여백

블럭 태그 vs 인라인 태그 너비/높이 정책

블럭 태그 기본 정책

  • 너비: 부모 영역을 꽉 채움 (100%)

  • 높이: 내용물의 높이와 동일

블럭 태그 명시적 지정

  • 너비: 지정한 수치로 설정 가능

  • 높이: 지정한 수치로 설정 가능

인라인 태그 기본 정책

  • 너비: 내용물의 너비와 동일

  • 높이: 내용물의 높이와 동일

인라인 태그 명시적 지정

  • 너비: 지정 불가

  • 높이: 지정 불가

(예외: img 태그는 인라인이지만 너비/높이 지정 가능)

padding (안쪽 여백)

  • 테두리와 내부 내용물 사이의 간격 가독성 향상을 목적으로 사용

margin (바깥쪽 여백)

  • 테두리와 외부 요소 사이의 간격 요소 배치를 목적으로 사용
[ margin            ]
[  [ border       ] ]
[  [  [ padding ] ] ]
[  [  [ content ] ] ]
[  [             ] ] ]

0개의 댓글