margin 상쇄 시 해결방법

1. 부모 요소의 css 에 overflow : hidden 을 적용하면 된다 

부모요소 {
    overflow : hidden;
}

 

2. 부모 요소 전의 요소 css를 아래와 같이 바꿔주면 된다고 한다 ( 위의 경우가 display 속성을 건드리지 않으니

일반적인 경우는 1의 오버플로우 히든 방법을 쓸 것 같다

부모요소:before {
    content: "";
    display: table;
}

이런 방법이 있었다니!