에듀테크 프로젝트 대시보드
박스 모델
모든 HTML 요소는 content → padding → border → margin 순서로 겹겹이 쌓인 상자입니다. 숫자를 바꿔가며 각 영역이 어디인지 느껴보세요.
padding 을 늘려보세요 — content-box 박스는 점점 커지지만 border-box 박스는 안쪽만 좁아져요* { box-sizing: border-box; } 를 전역으로 걸어두는 게 계산이 편해서 관례예요margin 은 상자 바깥 여백(다른 요소와의 거리), padding 은 안쪽 여백(테두리와 내용 사이)