content
width와 height가 기본적으로 내용 영역만 가리키는지 확인한다.
content-box 기본padding/border
content-box에서는 padding과 border가 실제 박스 폭에 더해진다.
200+20*2+1*2box-sizing
border-box를 쓰면 지정 width 안에 content, padding, border가 함께 들어간다.
레이아웃 예측 쉬움display 흐름
block은 한 줄 전체, inline은 내용 폭, flex/grid는 자식 배치 규칙을 만든다.
배치 계약block
세로로 쌓이는 문서 흐름
section, div, p처럼 기본적으로 줄 전체를 차지한다.
width auto
inline
텍스트 흐름 안에 놓임
span, a처럼 줄바꿈 없이 내용 크기만큼 차지하고 width/height
제약이 약하다.
padding은 시각만 영향
inline-block
텍스트 흐름 + 박스 크기 제어
버튼, 배지처럼 줄 안에 두되 width/height와 padding을 안정적으로
준다.
baseline 간격 한계
flex/grid
부모가 자식 배치 알고리즘을 가짐
1차원 정렬은 flex, 행과 열을 동시에 설계하면 grid가 맞다.
container context