각각의 엘리먼트를 문서에 배치하기 위해서는 Box Model 이라고 부르는 margin, padding 그리고 border 속성을 전체적으로 이해해야 합니다.
위의 그림에서 중요한 4가지는 content, padding, border, margin 입니다.
- content : 순수한 콘텐츠
- padding : 콘텐츠와 경계선 사이의 여백
- border : 경계선
- 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값을 변경해 보면 이 값이 어떤 부분을 의미하는지 이해할 수 있습니다.
