[CSS] 레이아웃 구현에 영향을 미치는 여백 상쇄

오늘 '기초부터 완성까지, 프런트엔드' 책을 읽다가 내가 모르던 CSS 개념을 발견했다! 그것은 바로 '여백 상쇄'다. 때때로 레이아웃이 내가 생각한대로 구현이 안되는 경우가 있다. 그럴 땐 여백 상쇄 때문은 아닌지 고려해봐야겠다.

여백 상쇄란?

인접한 같은 레벨의 블록 요소에 상하 여백이 겹치면 여백이 하나로 합쳐지는 현상이다. 같은 레벨이라는 것은 두 요소가 형제 관계에 있다는 것을 의미한다. 

 

예시로 이해를 해보자. 위아래 margin을 30px을 준 p 태그가 있다. 이 태그 두 개를 위 아래로 붙이면 p 태그와 p 태그 사이에 60px의 여백이 생길 것 같지만 그렇지 않다.

실제 여백은 30px이다!

신기하게도 여백은 60px이 아닌 30px이다.

하나의 여백이 훨씬 더 크다면?

그렇다면 한 태그의 margin은 50px이고 다른 태그의 margin은 그대로 30px이면 어떻게 될까?

실제 여백은 50px이다!

그럴 땐 더 큰 margin을 가진 태그의 margin 사이즈만큼의 여백이 생긴다. 

또 다른 사례는 없을까?

책에서는 형제 관계일 때의 여백 상쇄 사례만 설명을 해서 여백 상쇄는 형제 관계일 때만 일어나는건가? 하고 MDN을 찾아보았다. MDN에서는 여백 상쇄가 일어나는 경우를 1. 인접 형제 2. 부모와 자손을 분리하는 컨텐츠 없음 3. 빈 블록 세 가지 경우로 설명하고 있다. 첫 번째 사례는 이미 알고 있으니 나머지 두 개의 사례도 정리를 해보자!

부모와 자손을 분리하는 컨텐츠가 없을 때

분리하는 컨텐츠가 없게 하려면 부모 요소가 내용을 가지지 않고, border와 같은 속성을 가지면 안된다. background-color는 괜찮다.

이때는 자식의 margin-top 크기가 여백이 된다.

이렇게 보면 더 이해가 잘된다.

부모 요소는 margin-top : 30px, 자식 요소는 margin-top : 50px을 갖는다. 이때 자식 요소의 margin-top 크기인 50px이 여백이 된다는 것을 알 수 있다. 만약에 부모 요소가 border를 가져서 부모와 자식이 분리가 되면 다음과 같이 바뀐다.

부모와 자식을 분리하는 컨텐츠가 생기면 이런 결과가 나온다.

부모의 margin-top: 30px, 자식의 margin-top : 50px 이 제대로 적용된 것을 볼 수 있다.

빈 블록일 때

마지막으로 빈 블록인 경우를 살펴보자. MDN에서 '테두리, 안쪽 여백, 인라인 콘텐츠, height, min-height, max-height가 없으면 블록의 margin-top과 margin-bottom이 서로 상쇄된다'고 한다. 

빈 블록일 때의 결과

.aaa는 margin-bottom : 30px, .bbb는 margin-top: 50px이다. 이때도 앞선 결과들처럼 50px만큼의 여백이 생기는 것을 알 수 있다.

여백 상쇄가 생기지 않는 경우

여백 상쇄는 display: flex 또는 display: grid나 position : absolute 일 때는 적용되지 않는다고 한다. position: absolute일 때는 적용이 안되는 걸 확인했는데 display: flex와 grid는 사용하면 부모-자식 관계일 땐 여백 상쇄가 발생하지 않는다. 

 

경계선의 유무에 따라 여백 상쇄가 생길 수도 있고, 생기지 않는다는 걸 코드를 치며 제대로 배웠다. background-color를 사용한다고 해서 경계가 생기지 않는 것도 신기하다. 내 눈에는 경계선처럼 보이는데 말이다🤫. 알면 알수록 신기한 CSS 세계다. 

참고 사이트

여백 상쇄 정복 - CSS: Cascading Style Sheets | MDN