[CSS] 마진(margin)과 패딩(padding)

웹에서 마진과 패딩을 여백을 의미합니다. 

마진과 패딩을 이용하면 콘텐츠를 원하는 곳에 배치할 수 있기에 활용도가 높습니다.

 

들어가기전에 마진과 패딩을 한눈에 볼 수 있게 표현하면 다음과 같습니다.

콘텐츠와 패딩을 묶어서 하나의 요소로 보고, 요소와 마진 사이의 경계를 테두리(border)라고 합니다.

 

---

 

1. 마진 (margin)

 마진은 현재 요소 주위의 여백입니다. 마진을 조절하여 요소와 요소사이의 간격을 조절할 수 있습니다.

마진은 다음과 같은 속성으로 조절합니다.

 

마진 속성: 속성 값; 

▽ margin-top: 상단의 여백 크기 지정

▽ margin-bottom: 하단의 여백 크기 지정

▽ margin-left: 좌측의 여백 크기 지정

▽ margin-right: 우측의 여백 크기 지정

▽ margin: 전체(네가지 방향 모두)의 여백 크기 지정

margin

 

그리고 마진에 올 수 있는 속성 값들은 다음과 같습니다.

 

속성 값	효과
크기 값	값을 단위(px 등)으로 직접 지정
백분율	요소의 부모 요소 기준으로 백분율로 여백 조정
auto	적절한 값으로 마진을 자동 조절

 

---

 

2. 패딩 (padding)

패딩은 콘텐츠와 테두리 사이의 여백입니다. 사용법은 마진과 같고 속성 값도 마진과 같습니다.

 

패딩 속성: 속성 값; 

▽ padding-top: 상단의 여백 크기 지정

▽ padding-bottom: 하단의 여백 크기 지정

▽ padding-left: 좌측의 여백 크기 지정

▽ padding-right: 우측의 여백 크기 지정

▽padding: 전체(네가지 방향 모두)의 여백 크기 지정

 

padding

---

마진과 패딩을 잘 활용하면 요소를 좀 더 원하는대로 배치할 수 있습니다.