요소 바깥쪽 간격과 auto 중앙 정렬을 이해합니다.
margin은 테두리 밖에서 다른 요소와 거리를 만듭니다. 좌우 auto와 명시적 width를 함께 쓰면 블록을 가운데 둘 수 있으며 세로 margin은 조건에 따라 겹칠 수 있습니다.
width: 70%와 좌우 auto 덕분에 두 상자는 점선으로 표시한 .stage 안에서 가운데에 놓입니다. 첫 상자의 아래 margin 24px와 두 번째 상자의 위 margin 40px는 세로로 맞닿아 상쇄되므로, 사이 간격은 더한 값 64px가 아니라 큰 쪽인 40px입니다. .stage에 테두리가 있어 첫 상자의 위 margin은 부모 밖으로 빠져나가지 않고 점선 안쪽에 그대로 보입니다.
margin을 퍼센트로 주면 margin-top과 margin-bottom도 높이가 아니라 포함 블록의 너비를 기준으로 계산됩니다. 또 세로 margin 상쇄는 일반 블록 흐름에서만 일어나고, flex나 grid 컨테이너 안의 항목끼리는 margin이 상쇄되지 않고 그대로 더해집니다.
margin으로 요소 내부 공간을 만들면 배경과 클릭 영역이 늘어나지 않습니다. 내부는 padding입니다.
직접 바꿔보세요margin 값을 10px 30px로 바꾸고 방향을 설명하세요.