이거 몇 시간째 붙잡고 있는데 도저히 이해가 안 돼서 질문드려요. 부모 div 안에 자식 div 하나 넣고, 자식한테 위쪽 여백 좀 주려고 margin-top: 40px 했거든요.
구조는 대충 이래요.
<div class="parent">
<div class="child">내용</div>
</div>
.parent { background: skyblue; }
.child { margin-top: 40px; }
제가 원한 건 부모 박스 안에서 자식만 40px 아래로 내려가는 거였어요. 근데 실제로는 자식은 부모 위쪽에 딱 붙어있고, 부모 박스 전체가 40px 밑으로 내려가버려요. 하늘색 배경이 자식 위쪽에 안 깔리고요.
검색해보니 마진 병합? 마진 collapse? 이런 얘기가 나오는데 설명 읽어도 잘 와닿지가 않네요. 왜 자식 마진이 부모 밖으로 삐져나가는 건지 이해가 안 돼요.
일단 부모에 padding-top: 1px 주니까 되긴 하던데 이게 맞는 방법인지, 아니면 더 정석적인 해결법이 따로 있는지 궁금합니다. 이런 현상이 왜 생기는 건지도 좀 풀어서 설명해주시면 감사하겠습니다.