반응형
CSS
Padding vs. Margin
| Padding | Margin | |
| 공간정의 | - 요소의 내용(content)과 그 경계(border) 사이의 공간 - 요소의 크기 + padding값 = 요소의 총 크기 |
- 요소의 경계(border) 바깥쪽에 있는 공간 - 주변 요소와의 분리를 위해 사 |
| 색상적용 | .배경색이나 배경 이미지 적용됨 | 배경색이나 배경 이미지가 적용 안됨 |
| 속성설정 | - padding-top, padding-right, padding-bottom, padding-left로 각각 설정 가능 - padding만을 사용해 단축 속성으로 사용 가능 |
- margin-top, margin-right, margin-bottom, margin-left 로 각각 설정 가능 - padding만을 사용해 단축 속성으로 사용 가능 |
| 비고 | . | '마진 중복(margin collapsing)' : 인접한 블록 요소의 상하 마진이 겹쳐 하나로 합쳐지는 현상 |
반응형
