마진 겹침 (margin-collapsing)
- 마진이 어떤 경우에 사라지는 현상이 존재
아래의 코드를 실행시키면,
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: 1px solid black;
margin: 100px;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<h1>Hello World</h1>
</body>
</html>
이렇게 겹치는 형태로 보여진다.
-> 두개의 마진이 겹치는 현상이 발생한 것, 겹침 현상이 일어나지 않는다면 중간에 위치하는 부분이 2배가 되야한다.
-> 위와 같은 현상을 마진겹침 (margin-collapsing)이라고 한다.
-> 마진 겹침은 위에 있는 태그와 아래에 있는 태그의 마진 값 중에 더 큰 값이 두개의 태그사이의 각격이 된다.
부모와 자식 간의 마진겹침 현상
- 부모 태그가 시각적으로 아무런 효과도 없는 투명한 상태가 되면 자식태그와 부모태그의 마진 값이 합쳐지는 결과를 가져옴
-> 부모 엘리먼트가 시각적 요소가 없는 투명한 상태일 때 부모 엘리먼트의 마진값과 자식 엘리먼트의 마진 값 중에 큰 마진 값이 자식 엘리먼트의 마진 값으로 사용된다.
<!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>
두개의 div 태그의 마진 겹침현상
- empty의 보더값을 없앤다면 margin-top과 margin-bottom이 겹쳐져 마진겹침 현상이 나타난다.
-> 시각적인 요소가 없다면 그 태그의 마진 값은 위에 마진값과 아래쪽에 있는 마진 값 중 더 큰 값이 마진값이 된다.
<!DOCTYPE html>
<html>
<head>
<style>
#empty {
margin-top: 50px;
margin-bottom: 100px;
/* border: 1px solid tomato; */
}
#normal {
background-color: powderblue;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="empty"></div>
<div id="normal">normal</div>
</body>
</html>
'html & css > 개념' 카테고리의 다른 글
| flex 소개 (1) | 2023.11.24 |
|---|---|
| 포지션 (position) (1) | 2023.11.22 |
| box-sizing (0) | 2023.11.21 |
| 박스모델 (1) | 2023.11.21 |
| 인라인 VS 블럭레벨 (2) | 2023.11.21 |
