[css] margin과 padding 적재적소에 사용하는 법 (feat. margin-collapsing 마진병합현상/마진상쇄현상)

 

margin과 padding의 차이점?

아니, margin 과 padding 의 정확한 사용법!

 

어느덧 코딩한지 8개월차, (학원 다닌 기간 포함)

마진과 패딩의 차이점을 이론적으로는 충~분히 알고 있다.

그런데 실전에서 적용하려고 하니 그 사용 대상이 애매해지는 경우가 많았다.

생각하기에 따라 margin 과 padding을 적용하는 곳이 달라진다.

물론 이것 또한 일종의 방법론이긴 하나 적절하게 나누어서 사용하는 것이 제일이다.

 

예를 들면, 

B 박스 안에 A 박스가 있을 때, A 박스의 위치를 잡기 위해서는 어떻게 코딩하느냐.

나는 B 박스에 패딩을 줘서 A 박스의 영역을 잡곤 했는데, 물론 이것도 틀린 방법은 아니다.

박스를 어떻게 볼지 그 관점에 따라 달라지는 것인데,

아래의 그림을 참고하자.

 

https://coding-factory.tistory.com/187

 

다시 한번 아까의 예시로 돌아가서 살펴보자.

내가 생각한 방식대로라면, 나는 전체 영역은 이미 있고 내가 코딩한 부분이 오브젝트라고 생각했다.

즉, 기본적으로 잡혀있는 body 영역이 위 그림의 두꺼운 보더 부분이 되고,

B 박스가 내부 사각형(얇은 보더), A 박스를 Object라는 글씨로 본 것이다.

 

하지만 B 박스를 전체 영역이라고 생각한다면 A 박스에 마진을 줘서 위치를 잡는 게 맞는 방법인 것이다.

 

이렇게 두 가지 방식을 비교해보면 생각의 차이가 확연해진다.

그렇다면 Object라는 글씨 자체를 inline 요소라고 생각하면 어떨까?

아니면 레이아웃 짤 때 많이 사용되는 클래스인 inner를 사용한다면?

여러가지 경우에 따라 판단은 달라질 것이다.

 

기본적으로 margin은 영역을 띄울 때, padding은 영역을 넓힐 때 사용하는 것이 좋다.

 

 

margin-collapsing

주의해야 하는 부분은 바로 margin-collapsing이다.

블록 요소 간의 상하단 마진이 병합되는 것인데, 이 때 두 마진 값 중 큰 값으로 병합된다.

참고로 좌우 마진은 병합되지 않는다.

예) 상하로 정렬된 A,B 박스에게 margin:20px;을 주면 A와 B 사이의 간격은 20px

이를 이용하면 전체적인 레이아웃을 안정적으로 간격을 띄워줄 수 있다.

 

그런데 왜 이게 주의해야 하는 점이냐?

바로 부모 자식 요소 간에도 겹침 현상이 일어나기 때문이다.

부모 요소B에 상하 마진을 주지 않고, 자식요소A에 마진을 주게 되면

그것이 부모요소 B의 마진으로 병합되어버린다.

이 경우에는 부모 요소인 B에 해당 자식요소 이외에 공간을 차지하는 요소가 없기 때문이다.

바로 이 점이 레이아웃 짤 때 제일 자주 겪는 문제점일 것이다.

 

레이아웃의 최상단부 혹은 최하단부에 background를 사용하는 경우, 마진을 쓰면 밀리는 것이다.

즉, B요소에 background를 넣고, A에 상하 마진을 넣게 되면 그 마진만큼 배경이 밀려버리는 것이

바로 자식요소 A의 마진이 부모요소인 B의 마진으로 병합되었기 때문이다.

따라서 이런 경우에는 padding으로 상하 여백을 주면 작업이 편해진다.

 

 

이외에도 해결법은 여러가지가 있는데 아래 블로그를 참고하면 좋다.

 

https://velog.io/@ursr0706/%EB%A7%88%EC%A7%84margin

마진 병합 현상(Margin Collapsing)

 

 

 

position: absolute 와 함께 사용하는 경우

 

padding을 사용하면 해당 영역은 padding을 포함한 영역이 전체 영역으로 인식이 된다.

따라서 여기에 relative를 주고 내부에 absolute를 사용하게 되면 padding값까지 고려하여 위치를 지정해줘야 한다.

즉, B에 position : relative; padding : 30px을 주고 a에 position : absolute; top : 0;을 하면

패딩의 제일 윗부분으로 지정되는 것이다.

이런 경우에는 margin을 사용하면 영역 지정이 훨씬 수월해진다.

 

 

 

이제 원하는 화면을 그대로 구현해낼 수 있지만,

좀 더 효과적이고 실용적으로 구현하는 것이 서툴다.

여러가지 방식으로 해보면서 경험 쌓는 것이 중요한 것 같다.