CSS: padding, margin, position

1. padding (안쪽 여백)

내용

콘텐츠와 테두리 사이에 공간이 생김.
내부 여백을 만들어줌. 붉은 점선 내부가 padding 영역.

2. margin (바깥쪽 여백)

 

요소 바깥쪽에 공간이 생김.
다른 요소와의 거리 확보용.

3. position: static

static

기본값. 요소는 문서 흐름에 따라 배치됨.
top, left 등 오프셋 속성은 적용되지 않음.

4. position: relative

relative

요소는 원래 자리 기준으로 오프셋(top, left 등) 적용 가능.
눈에는 이동한 것처럼 보이지만, 원래 공간은 그대로 남음.
배치 기준이 자기 자신.

5. position: absolute

absolute

요소는 일반적인 문서 흐름에서 제거됨.
가장 가까운 position 속성이 설정된 조상 요소를 기준으로 위치함.
기준이 되는 조상 요소가 없으면 body를 기준으로 함.

6. position: fixed

요소는 화면(뷰포트)을 기준으로 위치가 고정됨.
스크롤해도 항상 해당 위치에 유지됨.
👉 오른쪽 하단에 고정된 fixed 박스를 볼 수 있음.

7. position: sticky

⬇️ 아래로 스크롤해보세요

sticky

top에 닿으면 고정됩니다.

요소는 흐름을 따라 이동하다가, 지정된 위치에 (예시는 top: 0)도달하면 고정됨.
단, 부모 요소의 영역을 벗어나면 다시 스크롤됨.

fixed