C-log

💅✨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>
<html lang="en">

<head>
  <link rel="stylesheet" href="./style.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="empty"></div>
  <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
저작자표시

'💅CSS > ⚡ver.0' 카테고리의 다른 글

💅✨Decorate from CSS : margin 겹침/중첩(2)  (0) 2024.02.20
💅✨Decorate from CSS : margin 겹침/중첩(1)  (0) 2024.02.20
💅✨Decorate from CSS : box-sizing  (0) 2024.02.20
💅✨Decorate from CSS : box model  (0) 2024.02.20
💅✨Decorate from CSS : inline block  (0) 2024.02.19
'💅CSS/⚡ver.0' Related Articles more
Comments