div 사이에 공백이 생기는 이유가 궁금합니다

아래 소스에서 B 영역과 C 영역 사이에 공백이 생기는데 이유를 잘 모르겠어요.
CSS 초기화가 안 돼서 그렇다는 답변을 듣고 상단에 `* {margin:0;padding:0;}`를 넣으니 붙었습니다.
초기화 전에도 1 영역과 2 영역처럼 붙어야 하는 것 아닌가요?
1과 2 영역, A와 C 영역의 차이가 궁금합니다.