Box Model - Margins, padding and borders

각각의 엘리먼트를 문서에 배치하기 위해서는 Box Model 이라고 부르는 margin, padding 그리고 border 속성을 전체적으로 이해해야 합니다. 

위의 그림에서 중요한 4가지는 content, padding, border, margin 입니다.

1. content : 순수한 콘텐츠
   
2. padding : 콘텐츠와 경계선 사이의 여백
   
3. border : 경계선
   
4. margin : 경계선 밖에서 박스모델의 최종 경계선까지의 여백
   

<table width="300" cellpadding="0" cellspacing="0" border="0" align="center"> <tr> <td bgcolor="#EEEEEE"> <div style="padding:10px; margin:10px; border:1px gray solid;">Box Model을 설명하기 위한 예제</div> </td> </tr> </table>

이 예제에서 padding값과 margin값을 변경해 보면 이 값이 어떤 부분을 의미하는지 이해할 수 있습니다.

Box Model을 설명하기 위한 예제

※출처 : http://www.homejjang.com/