박스모델 - 마진(margin) 영역의 특징

 

마진(margin)은 엘레멘트의 테두리를 감싸고 있는 깨끗한 영역이다. 마진은 해당 엘레멘트의 배경색에 영향을 받지 않으며, 부모영역의 색을 나타나게 된다.

 

<div>
기본영역<br/>
width:200px<br/>
height:100px
</div>

 

<div style="margin:20px;">
마진 테스트<br/>
widht:200px<br/>
height:100px
</div>

 

 

 

 

 

인라인 엘레멘트의 마진 속성

 

인라인 엘레멘트에서 마진에서 높이는 영향을 받지 않고 좌우로만 마진이 적용됩니다.

 

<div>
블럭 영역
</div>
<span style="margin:20px;">인라인 영역의 마진 속성</span>
<span>다른 인라인 영역</span>

 

 

 

 

 

마진의 스타일 속성들

• margin    // top, right, bottom, left 순
• margin-top
• margin-bottom
• margin-right
• margin-left

 

※ 속성값에 auto를 줄 경우 브라우저가 자동으로 마진을 잡습니다.