1. 마진겹침현상

나는 마진을 총 40을 주었는데 검사 탭을 눌러보면
child 1은 부모의 마진과 겹쳐서 마진이 부모를 뚫고 나간것을 알수있고
child2는 child1과 마진이 겹쳐서 총 40이 떨어져야할 마진탑이 20 떨어진것을 알 수 있다

합리적인 현상이라고 배웠다

하지만 여러 퍼블리셔 분들은 굉장히 성가셔 하시는 것 같다
사실 나도 성가실때가 아주 많아

2. 처리법

1. overflow : hidden

부모요소에 히든 속성을 주면 마진 탑과 바텀에 마진이 설정된다
하지만 형제요소 두명의 마진은 해결되지 않는다

2. display : inline-block

이것 또한 1번 처럼 가능하다 다만 이 방법은 부모요소의 동격 요소가 나란 히 올 수도 있으니 조심하자

3. border

테두리를 만들어줘도 가능하다
주의 할점은 none 속성으로는 해결이 불가능하다

4. etc

이 외에도 패딩을 주거나 table 요소를 추가 해주거나 ::before같은 가상요소를 추가해주는 방법이 있다

3. 마무리

over-flow 나 flow-root를 사용하는 방식이 왜 해결이 가능한지는 bfc(block-formet-context)와 관련이 있다고 한다 bfc를 더 파봐야 할듯하다

ref

• https://www.w3schools.com/css/css_margin_collapse.asp