Child element에 margin을 줬는데, Parent element에 margin이 먹힐 때...

나는 parent element는 그대로 있고, child element가 parent element로부터 떨어지기를 원했다. 그런데 child element가 margin-top을 줬는데 child가 떨어지는 것이 아닌 parent element가 먹는 것이었다.이거 해결하는데 생각보다 엄청 오래걸린 것 같다. 해결법은 아래 stackoverflow에서 찾았다.

내가 원하는 화면으로 나오게 하는 방법으로

1. child margin을 주지 않고 parent의 padding-top을 주는 것.

2. parent padding-top: 1px marign-top: -1px; 을 주고 child에는 원하는 만큼 주는 것.

3. child를 display: inline-block으로 만드는 것 이 있었다.

이것은 정상적인 동작입니다 (적어도 브라우저 구현 중). 여백은 부모에 패딩이없는 경우 부모와 관련하여 자식의 위치에 영향을주지 않습니다.이 경우 대부분의 브라우저는 부모의 여백에 자식의 여백을 추가합니다.
관련 stackoverflow

즉 부모에 padding이 없어서 자식의 margin을 부모의 mar gin에 추가한 것 같다. ㅠㅠ