Box Model: Content, Padding, Border, Margin

"모든 element 가 박스. Content 주변의 네 링이 모든 layout 논쟁의 실제 주제."

네 링

모든 CSS 박스가 네 동심원 영역 가짐, 안쪽에서 바깥쪽으로:

1. Content — 텍스트, 이미지, 또는 자식 element.
2. Padding — border 안쪽 공간. 배경색이 padding 까지 확장.
3. Border — 보이는 경계. 자기 색, 너비, 스타일 가짐.
4. Margin — border 바깥쪽 공간. 투명; 이웃을 밀어내.

DevTools (아무 브라우저) 가 Computed 창에서 시각으로 보여 줘: content (파랑), padding (초록), border (노랑), margin (주황) 색칠된 영역 가진 정사각형 다이어그램. 순서 외워; 이 레슨 모든 게 이걸로 돌아와.

width/height 질문

함정 여기 있어: .box { width: 200px; padding: 20px; border: 1px solid; } 적으면, 렌더된 element 가 얼마나 넓어?

기본 (box-sizing: content-box — 옛 기본) 으로: 242px. 200px 가 content 너비; padding 과 border 가 더해져.

box-sizing: border-box 로: 200px. 200px 가 바깥 너비; padding 과 border 가 안에 살아.

어느 게 너의 mental model 과 매치해? 거의 모두가 "200px" — border-box 가정. 기본은 content-box, 그래서 모든 모던 reset 이 이걸로 시작:

Universal Reset (이거 외워)

이 세 줄 reset 이 모든 모던 CSS 파일에 있어. 너가 쓰는 모든 페이지에 적용하고, 기본이 존재했었다는 걸 잊어:

Margin Collapse: 수학이 거짓말하는 한 자리

두 수직 margin 이 만나면, 더해지지 않아. 둘 중 큰 거로 무너져. <h2 style="margin-bottom: 30px"> 뒤에 <p style="margin-top: 20px"> 가 둘 사이 30px 만들어, 50px 가 아니라.

규칙:

• 수직만. 수평 margin 은 절대 collapse 안 함.
• 인접 sibling 이 collapse. 두 block element 사이 공간은 첫 번째의 bottom margin 과 두 번째의 top margin 중 큰 쪽.
• 부모와 첫/마지막 자식이 collapse — 둘 사이에 아무것도 없으면 (padding 없음, border 없음, 인라인 콘텐츠 없음). "내 자식 margin-top 이 부모 밀어내림" 이 일어나는 이유.
• 음수 margin 이 양수와 collapse. Sibling 의 margin-bottom: 30px 와 margin-top: -10px 가 둘 사이 20px.

Collapse 는 block flow 에서만 발생. Flexbox 자식은 collapse 안 함. Grid 항목도 안 함. 모던 CSS 가 layout 에 Flexbox 와 Grid 쓰는 큰 이유: margin collapse 가 너를 놀라게 그만함.

min-width, max-width, min-height, max-height

값이 아니라 제약. 트리거되면 width/height override:

• Content 가 그 밑으로 줄어들면 min-width 가 width 이김.
• Content 가 그 너머로 자라면 max-width 가 width 이김.
• 가장 유용한 패턴: img, video { max-width: 100%; height: auto; } — 이미지가 fit 으로 줄어들지만 컨테이너 over flow 절대 안 함.
• 가장 유용한 페이지 패턴: main { max-width: 70ch; margin: 0 auto; } — 가독성 좋은 줄 길이, 가운데 정렬.

Aspect Ratio: 모던 property

aspect-ratio: 16 / 9 가 박스 height 를 width 의 비율로 설정. 옛날엔 padding-bottom hack 필요; 이제 native. 반응형 이미지와 embed 와 완벽하게 페어.

피파의 노트