개체의 각 top, right, bottom, left 편의 마진의 너비를 반환하거나 설정한다.

인수
cssSelector : (스타일 선택자)
속성을 가질수 있는 엘레멘트()나 클라스(class) 이름 혹은 인식자(id)이다.

: (속성 문자열)
스타일 속성은 개체의 각 top, right, bottom, left 편의 마진의 너비를 나타내는 문자열이다.

(위쪽) marginTop 속성의 유효한 범위의 마진 너비의 값이다.
(오른쪽) marginRight 속성의 유효한 범위의 마진 너비의 값이다.
(아래쪽) marginBottom 속성의 유효한 범위의 마진 너비의 값이다.
(왼쪽) marginLeft 속성의 유효한 범위의 마진 너비의 값이다.

이 속성은 currentStyle에서는 읽기전용이고, 그외의 개체에서는 읽기/쓰기이며, 디폴트값은 0 0이다.

CSS(Cascading Style Sheets) 애트리뷰트는 상속되지 않는다.

특기

이 속성은 네가지 값을 한번에 설정하거나 반환할 수 있는 복합 축약 속성이다.
네가지 속성의 순서는 top, right, botttom, left이다.

IE4.0에서, 글꼴의 높이에 상대적인 길이값 em, 혹은 'x' 글자 높이에 상대적인 길이값 ex을 지정할 수 있다.

IE3.0에서, 지정된 마진갓이 개체의 디폴트값에 더해졌었다. IE4.0 이후 마진값은 절대값이다. IE4.0에서 마진 속성은 td와 tr 개체에서는 작용하지 않지만 IE3.0에서는 작동했었다. IE4.0 이후에서 개체에 적용하려면 td 개체 속에서 div이나 p등 개체에 margin을 적용하면 된다.

IE5.5에서는, 이 속성이 인라인 엘레멘트에도 적용된다. 이전 버전에서는 인라인 엘레멘트는 position 속성값이 absolute이거나 이 속성을 이용하여 배치되어야 한다. height나 width 속성의 설정된 값에 의하여 엘레멘트의 배치가 결정된다.

인라인 엘레멘트에서 top과 bottom 값은 주위 인라인 엘레멘트의 테두리(border) 지역을 계산에 사용된다. 이 값은 라인의 높이에 참여하지 않는다.

마진(margin) 지역은 항상 투명하다.

적용
개체scriptCSS IE 버전
참조
CSS 길이단위 margin marginTop marginBottom marginLeft marginRight

이 속성은 CSS1(Cascading Style Sheets, Level 1)에서 정의되었다.
결과 표시창

노란색 부분이 margin 지역이다. 이미지 위에 마우스를 올려보라.

<SCRIPT>
function showAll(){
  str='img1Obj.style.margin='+img1Obj.style.margin+'<BR>';
  str+='img2Obj.style.margin='+img2Obj.style.margin+'<BR>';
  showA.innerHTML=str;
}
</SCRIPT>
<TABLE height=250 width=600>
<TR>
<TD>
<DIV style="border:solid 1 blue;background-color:ffa;width:1">
<IMG id="img1Obj" src="../../gif/flower.jpg" width="200" style="margin:10 20 30 40"
  onmouseover="this.style.margin='40 30 20 10';showAll()" onmouseout="this.style.margin='10 20 30 40';showAll()">
</DIV>
</TD>
<TD>
<DIV style="border:solid 1 blue;background-color:ffa;width:1">
<IMG id="img2Obj" src="../../gif/flower1.jpg" width="200" style="margin:10 40"
  onmouseover="this.style.margin='40 10';showAll()" onmouseout="this.style.margin='10 40';showAll()">
</DIV>
</TD>
</TR>
</TABLE>
<DIV id=showA>결과 표시창</DIV>