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

💅CSS/⚡ver.0

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

4:Bee 2024. 2. 20. 15:20

728x90

이번 포스팅은 지난번 border 값을 제거했을 때 해당 요소가 밀리는 margin 겹침/중첩 현상을 다루어 볼 것이다. 우선 코드를 살펴보면 아래와 같다.

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<div id="normal">normal</div>

</body>

</html>

#empty {

margin-top: 50px;

margin-bottom: 100px;

border: 1px solid tomato;

}

#normal {

background-color: powderblue;

margin-top: 100px;

}

왼)#empty 요소의 margin이다. 오)#normal 요소의 margin이다.

현재 normal요소에 margin-top을 100px를 주었을 때 아무런 변화가 없다. 이는 중첩 현상 때문이다. 따라서 normal 요소가 움직이게 되려면 100px보다 크다면 아래로 움직이게 될 것이다. 여기까지는 우리 모두가 알고 있는 부분이다. 하지만 여기서 empty 요소에 border값을 제거하게 되면 아래와 같은 결과가 된다.

border를 지운 순간 normal요소가 위로 올라간 것을 알 수 있다.

왜 border값을 제거하면 위로 올라가게 되는 것일까? border의 시각적으로 보여지는 것의 여부로 margin의 중첩현상 차이가 생기는 것이다. 즉, 시각적 요소 콘텐츠, 박스 선딩이 없을 때 margin의 가장 큰 마진 하나만 먹이게 되는 것이다. 반대로 존재할 때는 우리가 알고 있는 중첩현상이 발생하는 것이다. 정확하게 margin 중첩현상이 누굴 위해서 왜 일어나는진 이유가 명화하진 않지만 이러한 차이가 있다는 것을 인지하고 css를 작성하면 좋을 듯하다.

728x90

저작자표시 (새창열림)