마진(Margin)과 패딩(Padding)의 차이와 입력 방법

 

 

마진(Margin)과 패딩(Padding)의 차이

 

- 마진(Margin)은 보더값을 기준으로 컨텐츠의 바깥쪽에 위치한 여백을 의미합니다.

 

- 패딩(Padding)은 컨텐츠 안쪽의 여백을 의미합니다. 

 

자세한 내용은 아래 사진을 보면 쉽게 이해가 가능합니다. 

 

 

마진과 패딩

 

마진(Margin)과 패딩(Padding)의 입력 방법

 

마진 혹은 패딩을 입력 방법에 대해 알아 보겠습니다. 기본적으로 입력 방법은 '위 -> 오른쪽 -> 아래 -> 왼쪽' 이렇게 시계 방향 순서라고 생각하시면 됩니다. 

 

 

4개 값 입력 시

 

- 위 -> 오른쪽 -> 아래 -> 왼쪽

 

 

3개 값 입력 시

 

- 위 -> 오른쪽/왼쪽 -> 아래

 

 

2개 값 입력 시

 

- 위/아래 -> 오른쪽/왼쪽

 

 

1개 값 입력 시

 

- 위/아래/오른쪽/왼쪽 모두 동일한 마진 혹은 패딩값

 

 

자세한 내용은 아래 코드펜을 참고해 주세요.

 

 

See the Pen XWJXGbo by Sky Lee (@Tropicalsky) on CodePen.