[CSS] margin 겹침 (마진 상쇄 현상 Margin collapsing)
by mini_min[CSS] margin 겹침 (마진 상쇄 현상 Margin collapsing)
✔️ [CSS] margin 겹침 (마진 상쇄 현상)
top 및 bottom 마진은 가장 큰 한 마진으로 결합(combine, 상쇄(collapsed))된다.마진 겹침은 어떤 두 개 이상 블록 요소의 상하 마진이 겹칠 때 어느 한 쪽의 값만 적용된다.- 마진 겹침은 인접한 두 박스가 온전한 block-level 요소일 경우에 발생한다.
- 마진 값이 0이더라도 겹칩은 적용된다.
- 좌우 마진은 겹치더라도 상쇄되지 않는다.
- 마진 겹침이 일어나는 경우
인접 형제의 상하 마진이 겹칠 때, 빈 요소(height가 0인경우)의 상하 마진이 겹칠 때, 부모 박스와 첫 번째(마지막) 자식 박스의 상단(하단) 마진이 겹칠 때
- 마진 겹침은 인접한 두 박스가 온전한 block 레벨 요소일 경우에만 적용
- 마진 겹침을 막으려면 부모 박스 상단(하단)에 padding 또는 border 값을 주어 벽을 만들어주는 것이 안전
.box {
width: 200px;
border: 2px dotted gray;
}
.h {height: 100px;}
.m {margin: 20px;}
.p {padding: 1px; }
.b {border: 1px solid rgb(0,0,0,0);}
.orange{background: orange;}
.yellow {background: yellow;}
.green {background: green;}
<!-- 좌우는 모두 margin이 적용되지만 상하는 한번만 margin이 적용 됨 -->
<div class="box">
<div class="orange m">
<div class="yellow m">
<div class="green m h">A</div>
</div>
</div>
</div>
<hr>
🔒 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
width: 100px; height: 50px;
border: 3px dotted gray;
}
.m1 {margin-bottom: 30px;}
.m2 {margin-bottom: 15px;}
.m3 {margin-top: 15px;}
/*30 마진이 생길줄 알았는데 안나옴...*/
/*top 은 겹치면 0이 되어.... 먹혀...*/
</style>
</head>
<body>
<h3>마진 겹칩(마진 상쇄) 현상</h3>
<div class="box m1"></div>
<div class="box"></div>
<hr>
<!-- 이런 경우에는 첫번째 margin-bottom을 조정하거나, inline-block으로 설정 한다. -->
<div class="box m2"></div>
<div class="box m3"></div>
<hr>
</body>
</html>
💡 첫번째 케이스처럼 두번째 케이스도 마진이 30px가 나와야하지만, 15px 마진 하나만 남은 상태.
이런 경우에는 첫번째 margin-bottom을 조정하거나, inline-block으로 설정 한다.
'HTML' 카테고리의 다른 글
| [CSS] position 속성 - static, relative, absolute, fixed (0) | 2022.09.17 |
|---|---|
| [CSS] float 속성 ⭐⭐ / 해제 방법 (0) | 2022.09.17 |
| [CSS] border-style 속성 (box-shadow/ border-radius) (0) | 2022.09.17 |
| [CSS] overflow 속성 / resize 속성 / opacity 불투명도 (0) | 2022.09.17 |
| [CSS] display 속성 / visibility:hidden / vertical-align (2) | 2022.09.17 |
블로그의 정보
개발자 미니민의 개발로그
mini_min