posted by 희정냥★ 2011. 9. 18. 23:15

각각의 엘리먼트를 문서에 배치하기 위해서는 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값을 변경해 보면 이 값이 어떤 부분을 의미하는지 이해할 수 있습니다.

'Computer > Web' 카테고리의 다른 글

HTML5 주요기술  (0) 2012.06.29
HTML5 웹소켓  (4) 2012.06.29
CSS Box Model  (0) 2011.09.18
CSS 선택자  (0) 2011.09.18
Web 2.0 기반의 Presentation On The Web  (0) 2009.08.06
syntaxhighlighter를 tistory에서 사용 하는 방법  (0) 2008.10.08

댓글을 달아 주세요