margin , padding , width , height , border 의 관계

레이아웃을 짜기 위해서 반드시 알고 가셔야 하는 부분입니다.

위 그림에서 볼 수 있듯이,css에서 지정하는 width(폭), height(높이) 는 border , padding 부분을 제외한 실제 내용물의 폭과 높이에 해당합니다. 예를들어, 테두리 바깥쪽을 기준으로 한 전체 상자의 폭이 500픽셀, 내용물이 480 픽셀, 테두리가 2픽셀, 그리고 바깥의 여백이 10픽셀이 되게 하고 싶다면,

#div { width:480px; padding:8px; border:2px; margin:10px; }

과 같이 하면 됩니다.