Suhenism

[CSS] 마진겹침(Margin-Collapsing) 현상 본문

Coding 코딩/CSS

[CSS] 마진겹침(Margin-Collapsing) 현상

ryusudol 2022. 9. 8. 16:59

Box Model

CSS Box Model

 

CSS를 배울 때 제일 처음 공부하는 게 Box Model이다.

 

Box Model은 CSS의 기본이자 아주 단순한 개념이다.

 

그래서 처음 공부할 때는 잘 적용할 수 있을 것 같은 자신감마저 들게 한다.

 

 

 

 

하지만 CSS 코드를 짜기 시작하자마자 난관에 봉착한다.

 

생각했던 것과는 전혀 다른 결과가 나오기 때문이다.

 

Box Model 적용에는 크게 두 개의 걸림돌이 있다.

 

1. (HTML) inline / block

2. 마진겹침 (Margin-Collapsing)

 

1번 inline / block element에 관해서는 이전 글에 정리해뒀으니 아래 링크에서 참고하면 좋을 것 같다.

 

이번 포스팅에선 2번 마진겹침에 대해 간략하게만 정리하자.

 

https://suhenism.tistory.com/entry/CSS-inline-block-inline-block-%ED%8A%B9%EC%A7%95

 

[CSS] inline, block, inline-block 특징

HTML 태그 종류 1. inline 2. block (3. (CSS) inline-block) inline 'inline' element는 , 태그처럼 줄바꿈이 되지 않고 content 크기만큼만 공간을 자치한다. content 크기만큼만 공간을 차지하기 때문에 width..

suhenism.tistory.com

마진겹침 (Margin-Collapsing)

마진겹침 현상은 말 그대로 동등한 레벨의 두 element 사이의 margin이 겹치는 현상이다.

 

(parent/child element 간에 발생하는 마진겹침도 있지만, 이번 포스팅은 동등한 레벨 element에 대해서만 정리한다)

 

HTML

<body>
    <div class="first">I'm div 1</div>
    <div class="second">I'm div 2</div>
</body>

CSS

.first, .second {
  border: 1px solid red;
  width: 300px;
  height: 50px;
  padding: 10px;
  margin: 50px;
}

Result

Margin-Collapsing Result

 

두 <div> 모두 동일하게 width, height, padding, margin을 지정했는데 margin만 겹치는 것을 볼 수 있다.

 

그렇다면 HTML 코드는 그대로 두고 CSS만 수정해서  한쪽 margin만 100px을 주면 어떻게 될까?

 

CSS

.first, .second {
  border: 1px solid red;
  width: 300px;
  height: 50px;
  padding: 10px;
  margin: 50px;
}

.first {
  margin-bottom: 100px;
}​

Result

Margin-Collapsing Result 2

 

위쪽 <div>에만 margin을 100px로 설정하고 아래쪽 <div>는 margin을 50px로 그대로 두었더니 위와 같이 나왔다.

 

두 <div> 사이 거리는 100px인데, 아래 <div>의 margin은 50px로 그대로임을 알 수 있다.

 

즉, margin이 겹칠 경우 둘 중 margin이 더 큰 쪽을 기준으로 margin이 잡힌다는 것이다.

 

 

Conclusion

마진겹침(Margin-Collapsing) 현상을 통해서 margin의 본질을 이해할 수 있다.

 

margin은 padding이나 border처럼 한 element마다의 경계를 정하는 게 아닌,

 

여러 element 간의 최소 거리만을 정한다는 것이다.

 

 

 

Margin-Collapsing 현상이 발생한다는 것과

 

inline element에선 width/height와 margin, padding의 top/bottom을 설정할 수 없다는 것을 알고나면

 

앞으로 웹을 제작하면서 마주할 많은 곤란한 상황을 피해갈 수 있을 것이다.

'Coding 코딩 > CSS' 카테고리의 다른 글

[CSS] box-shadow 테두리 그림자  (2) 2022.09.09
[CSS @media] 미디어 쿼리 (Media Query) 개념  (0) 2022.09.09
[CSS] font-size 단위 px, em, rem  (0) 2022.09.08
[CSS] box-sizing: content-box / border-box  (0) 2022.09.08
[CSS] inline, block, inline-block 특징  (0) 2022.09.08
'Coding 코딩/CSS' Related Articles more