그림 12-17 1600px + 100px = 1700px

 

전체 배치 작업을 마친 다음 padding-top: 100px;을 적용했다면 다른 영역에 배치한 콘텐츠 또한 100px만큼 아래로 움직입니다. 즉, 모든 배치 작업을 마친 후 padding 속성을 사용하여 위치 조정 작업을 진행하면 전체 레이아웃이 틀어지는 문제가 생깁니다.

결국 우리는 마진 병합 현상이 일어나지 않도록 하되 다른 콘텐츠의 위치에도 영향을 끼치지 않으면서 introWrap 서랍장만 아래로 옮길 수 있는 방법을 찾아야 합니다. 이때 사용할 수 있는 방법이 바로 top 속성입니다.