[생활코딩] 마진 겹침 1
마진(margin)이란 여백, 테두리와 다른 element 테두리 사이의 간격을 의미합니다. 그 마진이 어떤 경우에 사라져 버리는 현상이 있습니다. 이를 마진 겹침 현상이라고 합니다. 만약 마진 겹침 현상
eundol1113.tistory.com
이번에 살펴볼 마진 겹침 현상은
부모 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 |
댓글