같이 공부하는 동기가 W3C 레퍼런스를 공부하다가 해석이 난해한 부분이 있어서, 같이 자료를 찾아보게 됐습니다. 레퍼런스 내용은 다음과 같습니다. If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block. -W3C Reference 위 예제에서 clearance라는 단어가 나오는데, clear 속성이 none이 아닐 때 생기는 요소간의 간격을 말합니다. ..

인접 형제 요소의 마진은 상쇄됩니다. See the Pen margin collapse sibling by 석금용 (@gmyong) on CodePen. .box1, .box2, .box3에 각각 margin 값으로 10px을 적용했습니다. 그러면 우리가 생각하기에는 각 박스 사이에는 20px의 공간이 생겨야 되지만, 마진 병합 현상으로 10px의 공간만 나타납니다. 만약 margin의 값이 다르다면 값이 큰 수치 값만큼 공간이 생깁니다. 부모와 첫 번째 자식 요소 첫 번째 자식 요소에 margin-top 속성을 적용했을 때 마진은 상쇄돼서 부모 바깥에 나타나게 됩니다. See the Pen margin collapse top by 석금용 (@gmyong) on CodePen. .box2가 .box1 안..