[css 기초] margin , padding 매번 헷갈리시는 분들 위한 포스팅

이 글을 클릭 하신분들은 magin, padding이 어떤 기능인지는 알지만,

아래와 같이 2개 이상일 때, 어디가 top 인지 letf인지 헷갈리시는 분들일텐데요.

이번 포스팅을 통해 확실하게 정리를 해보도록 하겠습니다. 

(margin과 padding은 사실상 같은 원리이기 때문에 이번 포스팅에서는 margin을 기준으로 설명하겠습니다.)

 

 

 

margin이 1개 일때

 

 

아래와 같이 top, right, bottom left 전체에 적용이 됩니다.

 

 

 

위와 같이 일괄적으로 지정하는게 아니라 각각 다른 크기를 지정하고 싶다면 어떻게 해야 할까요?

 

 

 

margin이 4개 일때

 

아래와 같이 top을 기준으로하여 시계방향 으로 크기가 지정됩니다.

 

사실 여기까지는 크게 헷갈리는 부분은 없을텐데요, 문제는 2개, 3개 일때입니다.

하지만 이 경우에도 앞서 배운 margin이 4개일때 적용했던 방법을이용하면 쉽게 외울 수 있습니다.

 

 

margin이 2개일 때

1. 아래와 같이 일단 4개일때 사용했던 방법처럼 top을 기준으로 하나씩 채워 넣습니다.

 

그런데 bottom 과 left 가 비어있죠? 이 값들은 아래와 같이 마주보는 위치로 값을 주면 됩니다.

 

정리하자면 margin이 2개일때, 첫번째 값은 top과, bottom에 , 두번째 값은 right와, left에 할당되는 것을 알 수 있습니다.

 

 

margin이 3개일 때

margin이 3개일때도 마찬가지가 원리가 적용됩니다.

 

1. top 을 기준으로 값을 채워넣습니다.

2. 없는 값은 마주보는 곳에서 값을 가져옵니다. 

정리하자면 margin이 3개 일때는 ,

첫번째값은 top

두번째값은 right, left

세번째값은 bottom 으로 할당됩니다.