지난 포스트에서 여백을 조절하는 마진Margin의 기본 개념을 배웠다면, 이번에는 마진이 위아래로 만날 때 발생하는 독특한 현상을 이야기할 차례다.
분명 마진값을 주었는데 예상보다 간격이 좁게 느껴진다면, 지금부터 알아볼 마진 겹침Margin Collapsing 현상이 원인일 것이다.
이전 포스트
CSS 레이아웃 기초: 블록과 인라인, 박스 모델(Padding과 Margin), box-sizing 속성 정리
생활코딩 CSS 수업 영상: 마진 겹침
<!DOCTYPE html>
<html>
<head>
<style>
li {
margin: 30px;
}
</style>
</head>
<body>
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
</ul>
</body>
</html>위의 생활코딩 수업 영상에서 사용한 코드다.
마진 겹침 현상이란 두 개 이상의 블록Block 요소가 위아래로 만날 때, 각자의 마진이 합쳐지지 않고 둘 중 더 큰 마진값 하나만 남는 현상을 말한다.
참고로 좌우 마진은 겹치지 않고 오직 상하 마진에서만 발생한다.
예를 들어, 위 박스에 margin-bottom: 30px, 아래 박스에 margin-top: 20px을 주면?
산술적인 합인 50px이 아니라, 더 큰 값인 30px만 적용되는 것이다.
이런 마진 겹침은 버그가 아니라 CSS 설계 당시부터 의도된 기능이다.
<!DOCTYPE html>
<html>
<head>
<style>
#parent {
border: 1px solid tomato;
margin-top: 100px;
}
#child {
background-color: powderblue;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
Hello World
</div>
</div>
</body>
</html>부모 요소에 테두리(border)나 패딩(padding)이 없으면, 부모와 자식의 마진이 하나로 합쳐지며 둘 중 큰 값이 '부모의 마진'처럼 작동하게 된다.
만약 이 마진 겹침을 방지하고 싶다면, 부모 요소에 padding이나 border를 추가하자.
단 1px의 투명한 선이라도 있으면 '벽' 역할을 하여 부모와 자식의 마진이 분리된다.
또는, 부모 요소 안에 단 한 줄의 텍스트라도 들어있다면, 이 역시 '시각적 벽' 역할을 하여 마진 겹침 현상을 막아준다.
<!DOCTYPE html>
<html>
<head>
<style>
#empty {
margin-top: 50px;
margin-bottom: 100px;
border: 1px solid tomato;
}
#child {
background-color: powderblue;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="empty"></div>
<div id="normal">normal</div>
</body>
</html>보통 박스는 [위쪽 마진 - 콘텐츠 - 아래쪽 마진] 순서로 자리를 차지한다.
하지만 이 코드의 #empty처럼 내부가 텅 빈 박스는 위쪽 벽과 아래쪽 벽이 서로 맞닿아 있는 상태가 된다.
위쪽 마진(margin-top: 50px)과 아래쪽 마진(margin-bottom: 100px) 사이에 콘텐츠가 없으니, 두 마진이 서로 만나 하나로 합쳐져 버린 것이다.
결과적으로 CSS는 이때 두 값을 더하지 않고, 더 큰 값인 100px만을 이 박스의 최종 마진으로 인정한다.
즉, 시각적인 효과가 없는 태그의 마진 값은 위쪽의 마진 값과 아래쪽의 마진 값 중에서 더 큰 값이 그 태그의 마진 값이 된다.
다음 포스트
CSS position 속성 완벽 가이드: static, relative, absolute, fixed 차이점 정리
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊
지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.
0 Comments
댓글 쓰기
🔸 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
🔸 비로그인 방문자 분께서는 '익명'보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
🔸 구글 로그인 방문자는 '알림 사용'에 체크를 하시면, 남겨주신 댓글에 대한 답글 알림을 메일로 받아볼 수 있습니다. 📩