8일차(2) : 마진 상쇄 이해하기

이번 글도 이전 글과 비슷한 내용을 다룰 것이다.

이전에는 블록 요소와 인라인 요소의 차이점과 그로 인해 생기는 현상에 대해 알아봤다면 지금부터는 블록 요소와 블록 요소 사이에 생기는 마진 상쇄에 대해서 알아보자!

 

마진 상쇄는 말 그대로 두개의 마진(여백)이 상쇄된다는 말인데, 이 현상이 브라우저에서 어떻게 나타나는지를 살펴보자.

다시 우리가 작성한 코드를 실행시키고 F12를 눌러 개발자도구를 켜보자.

h1의 margin의 공간을 잘 보라

<p>의 margin의 공간을 잘 보라

자! 지금부터는 눈 크게 뜨고 위 두 사진을 비교해 볼 것이다.

첫 번째 사진의 h1의 마진이 어디서부터 시작하는지 보라, 그리고 두 번째 사진의 p의 마진이 또 어디서 시작하는지 보라.

잘 보면 p의 마진이 h1의 마진의 끝나는 부분에서 부터가 아닌, h1의 하단 마진의 시작 부분과 같은 지점에서 시작하는 것이 보인다.

 

이는 무슨 뜻일까?

 

p의 상단 마진이 h1dml 하단 마진을 무시하고 바로 h1의 콘텐츠 아래에서부터 시작한다는 점이다.

이렇게 h1의 하단 마진이 무시되고 p의 상단 마진부터 시작되면서 h1의 하단 마진과 p의 상단 마진이 겹치는 상이 마진 상쇄이다!

어렵지 않지 않은가?

 

그러면 이 마진 상쇄에도 기준이 존재하는 게 그 기준을 알아보자.

위와 같은 예시는 h1의 하단 마진이 지고 p의 상단 마진이 우의를 점하고 p의 상단 마진의 크기로 두 박스 사이의 마진 사이즈가 결정되었다.

이 기준을 알아보기위해 우선 두 마진의 사이즈를 한번 비교해 보자.

 

h1 {
  font-size: 48px;
  color: rgb(71, 62, 62);
  margin: 12px 0;
}

#description {
  margin-bottom: 16px;
}

보면 h1의 마진 사이즈는 12이고 p의 마진 사이즈는 16이다.

이를 보고 우리는 더 큰 사이즈의 마진이 더 우위이지 않을까?라고 추측할 수 있다.

그러면 마진 사이즈를 바꿔가면서 한번 증명해 보자.

 

h1의 마진 사이즈를 40px로 늘리고 다시 박스모델을 비교해 보자.

보시는 바와 같이 h1의 마진 사이즈가 더 커지자 h1의 마진 사이즈가 우위를 점하고 h1의 마진 사이즈를 기준으로 마진 상쇄가 이뤄졌다.

 

그렇다면 조금 근본적인 질문을 해보자.

마진 상쇄는 왜 일어날까?

이에 대한 대답은 이렇다 만약 마진 상쇄가 없다면 두 박스 모델 사이의 공간이 두 마진값의 합이 되며 이를 계산하기 위해서 모든 면에 마진 사이즈를 직접 입력하게 되면 복잡해지기 때문이다.

아무것도 모르고 마진 상쇄를 보면 엥? 할 수 있지만 이 모든 건 실은 우리를 위한 배려였다!

 

아래 표의 박스 모델을 보자.

마진 상쇄가 이루어졌기에 각 박스끼리의 정렬이 매우 간편해진 모습니다.

 

이번 글은 여기서 마치겠다!