CSS의 모든 요소는 안쪽에서 바깥쪽으로 content, padding, border, margin 네 개의 레이어로 이루어진 직사각형 box입니다. 이들이 어떻게 결합되는지 이해하는 것이 모든 레이아웃의 기초입니다.
text
┌─────────────── margin ───────────────┐ ← 바깥쪽 공간, 요소 사이의 간격
│ ┌──────────── border ────────────┐ │
│ │ ┌───────── padding ────────┐ │ │ ← 안쪽 공간, content 주변의 여백
│ │ │ content │ │ │ ← 텍스트/이미지 (width × height)
│ │ └──────────────────────────┘ │ │
│ └─────────────────────────────────┘ │
└────────────────────────────────────────┘
css
{
: ;
: ;
: solid;
: ;
}
