Day8. margin collapsing

Margin collapsing

마진 결합이 이해가 될듯 말듯 해서 역시나 빔캠프에서 수업을 들었다.
(이하 내용은 수업을 듣고 정리한 내용입니다.)

✔️ margin collapsing의 조건

  1. 인접해 있는 block요소들끼리만 일어난다.
  2. 상 하단만 해당사항.!!(좌우는 아님)
  3. 의도된 설계에 의한 이로운 현상이다.(언제나 그런 것은 아님)

실습을 위해 <div>태그로 전체 섹션을 만들고 안에 역시나 <div>태그로 두 개의 section을 만들어주었다.
시각적으로 확인하기 위해 각각 배경 색을 넣어주었다. 검은색은 전체 섹션을 뚜렷하게 보기위해 <html>태그에 넣어주었다.

html

 <div class="contents">
    <div class="section">Section #1</div>
    <div class="section">Section #2</div>
</div>
css

html {
  background-color: black;
}

.contents {
  width: 300px;
  margin: 0 auto;
  background-color: pink;
}

.section {
   width: 200px;
   height: 200px;
   margin: 50px;
   background-color: white;
}

그리고 각 섹션 div에는 margin값을 50px을 주었다.
위 이미지를 보면 마진 결합이 일어난 것을 볼 수 있다. 각 섹션에 margin 50px을 주었기 때문에 section#1과 section#2 사이에는 각 margin bottom과 top이 만나 100px의 margin이 존재해야하는 거 아닌가 하는데 아니다. 위와 아래 section들의 마진이 결합되어 50px이 존재하는 것을 볼 수 있다.
근데 여기서 각 section#1의 margin top과 section#2의 margin bottom은 누구랑 결합된걸까,, 생각대로라면 8자가 보여야 하는거 아닐까? 각 section#1,2는 부모인 contents클래스를 가지는 div요소와 병합되었다.

이 경우 부모와 자식 사이에 텍스트 요소를 넣으면 마진 결합 현상이 발생하지 않는다.

그러나,, 실제 코딩할 때 저렇게 글자를 넣을 순 없으니, 다른 방법을 알아보자.
  1. 부모 요소에(contents클래스 div요소) padding 값을 1준다.

    공간을 차지하는 요소를 넣어줌으로써 부모와 자식간의 관계를 완전히 격리시킨다는 개념,,
  2. 부모 요소에게 border: 1px solid transparent;을 먹인다.

-> 위 두 가지 방법은 마진 결합 현상을 해결해주는 방법이라기 보다, 마진 결합 현상이 일어나지 않는 조건에 더 가깝다.
이걸 해결방법으로 사용하면 공간을 1px이라도 차지하기 때문에 내가 의도한 디자인과 멀어질 수 있다.

  1. section클래스 div의 display를 inline-block으로 바꿔주기

    이 방법을 써주면 마진 겹침 현상을 해결할 수 있는데, 섹션 간에 margin이 합쳐져 100px을 차지하게 된다.

  2. 부모요소에 overflow: hidden;을 먹인다.
    가장 안정적인 방법이다.

문제가 깔끔하게 해결되었다.✨
이 overflow는 대체 뭐길래 해결할 수 있는 것인가,, overflow에 대한 강의를 빔캠프 유튭에서 또 찾았는데 시간이 길어 이번주 안으로 보고 overflow개념을 정리해봐야겠다.!

SSE(Server-Sent Events)
[Java의 정석]Chapter4.조건문과 반복문(09~11)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage