margin 겹친 현상
CSS에서 ‘마진 겹침’ 현상은 ‘마진 병합(Margin Collapsing)’ 또는 ‘마진 중복(Margin Overlapping)’이라고 불리며, 이는 인접한 블록 요소들의 상단과 하단 마진이 서로 겹쳐 하나로 합쳐지는 현상을 말합니다. 이는 종종 웹 페이지 레이아웃을 구성할 때 예기치 않은 공간 배치 문제를 일으킬 수 있습니다.
마진 병합 현상은 주로 다음과 같은 상황에서 발생합니다:
1. 인접한 형제 요소들: 두 형제 요소가 상하로 배치되어 있을 때, 하단 요소의 상단 마진과 상단 요소의 하단 마진이 겹칠 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Margin Collapse Example</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
margin-bottom: 30px;
margin-top: 30px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
</body>
</html>
박스1, 박스2 위아래로 배치
주황색은 박스1의 마진영역이다, 박스2 바로 위까지 해당.
주황색은 박스2의 마진영역이다, 박스1 바로 위까지 해당.
박스1과 박스2의 마진영역이 겹치는 것을 확인할 수 있다.
이 예제에서는 두 개의 div 요소 (box 클래스)가 있으며, 각각 margin-top과 margin-bottom이 30px로 설정되어 있습니다. 웹 페이지에서 이 두 박스를 보면, 두 마진이 겹쳐서 실제 거리가 30px보다 크지 않은 것을 볼 수 있습니다. 이것이 바로 마진 병합 현상의 예시입니다.
2. 부모와 첫 번째/마지막 자식 요소: 부모 요소에 패딩이나 보더(border)가 없고, 첫 번째 또는 마지막 자식 요소에 마진이 있을 경우, 이 마진이 부모 요소의 마진과 겹치게 됩니다.
마진 병합 현상 중에서 부모 요소와 첫 번째 또는 마지막 자식 요소 간의 마진 병합을 보여주는 HTML과 CSS 예제를 제공하겠습니다. 이 예제에서는 부모 요소에는 마진이 없고, 첫 번째 자식 요소에만 마진이 설정됩니다. 결과적으로, 부모 요소의 경계와 첫 번째 자식 요소의 마진 사이에 마진 병합 현상이 발생합니다.
1. HTML 파일:
<!DOCTYPE html>
<html>
<head>
<title>Parent-Child Margin Collapse Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
</div>
</body>
</html>
2. CSS 파일 (styles.css):
.parent {
border: 2px solid black; /* 부모 경계 표시용 */
padding: 0;
margin: 0;
}
.child {
margin-top: 20px;
background-color: lightblue;
text-align: center;
}
/* 첫 번째 자식 요소에만 마진 적용 */
.child:first-child {
margin-top: 50px;
}
이 예제에서는 parent 클래스를 가진 div가 부모 요소이고, child 클래스를 가진 두 개의 div가 자식 요소입니다. 첫 번째 자식 요소(child:first-child)에만 margin-top: 50px;이 적용되어 있습니다. 이 마진은 부모 요소의 상단 경계와 겹치게 되며, 결과적으로 부모 요소의 상단에서 마진 병합 현상이 발생합니다.
마진 병합을 해결하거나 피하는 방법은 다음과 같습니다:
- 부모 요소에
overflow: hidden또는border를 추가하여 자식 요소의 마진이 부모와 병합되는 것을 방지합니다. - 인접 요소 사이에 투명한 보더(
border: 1px solid transparent)를 추가하여 마진 병합을 방지합니다. padding을 사용하여 인접 요소 간의 공간을 조절합니다.display: flex또는display: grid를 사용하여 부모 요소의 레이아웃을 변경합니다. 이는 마진 병합 현상을 일으키지 않습니다.