css margin 마진병합이란?

마진병합

- 부모와 자식이 수직방향 인접일 경우 자식에 margin-top이 부모에 적용되는 현상
   (인접한 block요소 끼리만 해당 / 형제인접 & 부모인접 성립)

 

- 인접한 부모와 자식중 가장 큰 값으로 병합이 되어 가장 바깥쪽 요소에 적용됨

   (큰 오브젝트의 마진값만 적용)

- 형제요소가 수직방향 인접일 경우 마진병합 발생함 (여백을 한방향으로 줄것)

   (상하단만 해당/ 좌우 노상관)

---

 

예제

 

section 박스 1,2 에

마진(바깥여백) 과

패딩(안쪽여백)을 줘보자.

 

.section {
    border: 1px solid black;
    background-color: #fff;
    margin: 20px;
    padding: 20px;
}

 

위 코드같이 css로 

margin: 20px

padding: 20px 

적용했을때 

마진병합이 발생했음을 알 수 있다. 

 

 

 

 

무엇이 마진병합일까?

 

 

 

 

 

 

section 에 공통으로 margin을 줬으므로 

각박스 사방으로 20px 이 적용되어 

가운데 틈이 총 40px이 되어야하지만,

css 마진병합으로 20px 만 적용된것을 알수 있다.

 

이런 마진 병합 현상은

css의 의도된 현상이여서 

안정적인 디자인을 하는데 도움이 된다. 

 

 

 

 

마진병합 현상의 조건은?

인접해있는 block 요소 끼리만 일어난다. block 요소이기에 상하단만 해당!

 

 

 

단 의도치 않은 마진병합 현상일때는?

 

 

---

 

부모 자식 요소간의 마진병합 예시 

 

 

이렇게 부모 요소 안의 자식 1.2 에 

margin 50px을 주었을때 

 

위아래로 밀리지않고, 양옆50px씩 가운데도 50px만 적용되었다.

.parents {
    background-color: #ddd;
    width: 200px;
    margin: 0 auto;
}
.children {
    background-color: darkred;
    color: #fff;
    width: 100px;
    height: 100px;
    margin: 50px;
    text-align: center;
    font-size: 30px;
}

 

이떄 자식에 margin 50px 을 준것이 parents 부모요소 준 margin 0 auto와 겹쳐 병합되어 margin-top이 0으로 병합되었다.

(큰 오브젝트의 마진값만 적용 - 부모)

 

---

 

 

마진병합 피하기 조건  1.  구성요소 넣어주기 

 

      <div class="parents">떨어뜨리기
        <h2>부모</h2>
        <div class="children">자식1</div>
        <div class="children">자식2</div>
      </div>

 

 parents 부모요소에 글자를 넣어줘 자식과 떨어뜨린다.

공간을 차지하고 있는 어떤 요소가 들어간다면

부모와 자식이 떨어져 마진병합이 일어나지 않는다. 

 

 

하지만 텍스트를 일일히 넣어줄수 없으니 패스

 

 

 

 

 

 

---

 

 

마진병합 피하기 조건 2.  부모에 padding 값 주기 

 

 

.parents {
    background-color: #ddd;
    width: 200px;
    margin: 0 auto;
    padding:1px    
}

부모에 padding 값으로 요소를 껴 넣어준다. 

그러나 요소각각에 간격을 2중 으로 넣는것도 비추 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

마진병합 피하기 조건 3.  부모에 border 값 주기 

 

 

.parents {
    background-color: #ddd;
    width: 200px;
    margin: 0 auto;
    border: 1px solid transparent; 
}

border:1px solid transparent;

값으로 투명 선을 주어 요소를 떨어트린다

 

 

허나 이러한 방법들은 궁극적인 마진병합의 해결책이아닌, 피하기 위한 조건이다. 

또한 1px 등 공간을 차지하기 때문에 원하는 디자인이 아닐 수 있다. 

 

 

 

---

 

 

 

 

그럼 해결 방안은?

 

마진병합은 block 요소의 상하 수직일때 일어나므로 

자식요소를 display: inline-block 으로 지정해준다. 

 

 

.children {
    background-color: darkred;
    color: #fff;
    width: 100px;
    height: 100px;
    margin: 50px;
    text-align: center;
    font-size: 30px;
    display: inline-block;
}

 

 

허나이렇게 마진병합이 깨질 경우 

자식요소 각각에 

50px 이 적용되어 중간값이 100px 로 보인다. 

 

 

 

 

 

 

 

 

---

 

 

가장 안정적인 방법은 바로 

부모에 overflow : hidden; 적용

 

 

.parents {
    background-color: #ddd;
    width: 200px;
    margin: 0 auto;
    overflow: hidden;
}

부모요소에 속성값으로 overflow:hidden;을 적용해줄 경우

새로운 블록 서식 맥락(block format context)

즉 블록박스의 레이아웃이 발생하는 부모요소 범위에

기준이 만들어 지면서 

 

부모의 margin과 자식의 margin이 별개로 떨어져 각각 적용된다는 이론

 

자식요소의 마진은 그대로 병합된다. 

 

 

 

 

 

 

 

어렵따.... 마진병합.... 뭔 소린지 ㅎㅋㅎㅋㅎㅋhttps://youtu.be/c19Mjg-ivxc

그래도 코딩가나다 빔캠프 님의 유튜브 영상이 큰 도움이 되었따!