margin 상쇄가 일어나는 경우

1. 형제 요소가 위 아래로 붙어있을 경우

2. 첫 줄인데 경우 부모의 아래 요소가 없을 경우

border
padding
inline (블록 속성이 아닌 요소)

3. 마지막 줄인데 부모의 아래 요소가 없을 경우

border
padding
inline
height
min-height
max-height

4. 근접한 블록이 아래 요소가 없을 경우

border
padding
inline
height
min-height
max-height

그렇다면 마진상쇄를 없애기 위해서는 어째야 될까?

모든 요소가 공통으로 가질수있는 아래 요소를 가지도록 하면 된다 == 이게 없으면 마진 상쇄가 일어난다

border
padding
inline

마진 상쇄를 막는 다른 효과적인 방법으로는 아래 글에 적은 부모요소에 overflow:hidden 을 사용하면 된다

margin 상쇄 시 해결방법

1. 부모 요소의 css 에 overflow : hidden 을 적용하면 된다 부모요소 { overflow : hidden; } 2. 부모 요소 전의 요소 css를 아래와 같이 바꿔주면 된다고 한다 ( 위의 경우가 display 속성을 건드리지 않으니 일..

tokkic.tistory.com

토끼씨