Box Model · Display

박스와 display

크기는 박스 모델로 계산하고, 줄바꿈과 나열 방식은 display 값으로 판단합니다.

박스 모델 안쪽에서 바깥쪽으로

margin: 다른 박스와의 거리
border: 박스의 경계선
padding: 내용과 테두리 사이
content: 실제 글과 이미지

box-sizing: border-box를 쓰면 지정한 width 안에 padding과 border가 함께 포함됩니다.

display가 만드는 배치 흐름

block

한 줄 전체를 차지

제목, 문단, 섹션처럼 위아래로 쌓이는 구조에 적합합니다.

inline

글 흐름 안에 놓임

링크나 강조처럼 문장 중간에 자연스럽게 섞입니다.

inline-block: 줄 안에 있으면서 크기 조절 가능
margin 상쇄: 세로 여백 계산에서 함께 고려