💅✨Decorate from CSS : margin 겹침/중첩(2)

💅CSS/⚡ver.0

💅✨Decorate from CSS : margin 겹침/중첩(2)

4:Bee 2024. 2. 20. 14:28

728x90

이번 포스팅에서는 부모와 자식 요소간의 margin 겹침/중첩 현상을 다루어 볼 것이다. 코드는 아래와 같다.

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

Hello World

</div>

</body>

</html>

#parent {

border: 1px solid tomato;

margin-top: 100px;

}

#child {

background-color: powderblue;

margin-top: 50px;

}

위와 같은 결과가 나온다. 이러한 결과가 나오는 것을 어느 정도 예측이 되었을 것이다. 부모 border안에 Hello World는 부모에 자식 요소로 존재하기에 부모 border 안에 잇는 것이다. 아직은 margin 겹침 현상이 일어 나지 않았다. 그 이유는 border대문인데 border를 주석 처리하고 다시 살펴보면 아래와 같다.

현재 margin-top 부분이 겹쳐 있는 것을 알 수 있다. 부모 요소의 margin-top 만큼의 50px을 자식이 차지하고 있다. 원래라면 자식이 50px만큼의 여역을 가지고 나머지 부모 영역에 100xp이 존재할 것같지만 그렇지 않다. 즉, 현재는 부모 자식 둘 중 가장 큰 margin 값을 사용하게 된다. 하지만 border을 상요했을 때는 우리가 생각한 것과 같이 분리가 된다는 것이다. 따라서 broder의 존재 유무에 따라 기존 margin 중첩 현상이 달라질 것이다. 이는 다음 포스팅에서 다루어 볼 것이다.

728x90

저작자표시 (새창열림)