이번에 살펴볼 마진 겹침 현상은
부모 element와 자식 element 모두가 마진(margin)값이 있는 경우에 발생 할 수 있는 겹침 현상입니다.
<!DOCTYPE html>
<html lang="en">
<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>
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#parent {
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>
이로써 알 수 있는 사실은
부모 태그의 시작적인 효과(ex border)가 사라지면(투명해지는 순간) 자식 태그의 위치가 변합니다.
이것이 부모 태그와 자식 태그 사이에서 일어날 수 있는 마진 겹침 현상입니다.
즉, 부모 태그가 시각적으로 아무런 효과도 없는 투명한상태가 되면
자식 태그와 부모 태그의 마진(margin) 값이 합쳐지는 결과를 낳는다는 겁니다.
'프레임워크 > CSS' 카테고리의 다른 글
[생활코딩] absoulte (0) | 2022.01.31 |
---|---|
[생활코딩] relative vs static (0) | 2022.01.31 |
[생활코딩] 마진 겹침 1 (0) | 2022.01.30 |
[생활코딩] box-sizing (0) | 2022.01.29 |
[생활코딩] box model (0) | 2022.01.29 |
댓글