margin collapse 질문

[헤벳]

<div style="background-color: aqua; width: 100%; height: 50px; margin-bottom: 50px;"></div>
<div style="background-color: blue; width: 100%; height: 50px;"></div>
<div style="background-color: black; width: 100%; height: 50px;"></div>

이런식으로 코드를 짰을 때 두 박스가 테두리가 붙어있어서 2번째 박스도 margin-bottom이 적용될 거라고 생각했는데
실행시켜보니까 2번째랑 3번째 박스 사이가 붙어 있더라구요. 왜 이렇게 나오는지 궁금합니다

[codingapple]

둘째랑 셋째 박스 사이엔 아무 margin을 안줘서 붙어있을 뿐입니다

[글쓴이]

글