최신 웹 개발 튜토리얼
 

Style margin Property

<스타일 개체

예

(A)의 네 여백 설정 <div> 요소를 :

document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";
»그것을 자신을 시도

정의 및 사용

여백 속성 집합 또는 요소의 여백을 반환합니다.

이 속성은 하나에서 네 개의 값을 취할 수 있습니다

  • 하나 개의 값, 같은 : DIV {마진 : 50 픽셀} - 네 마진은 50 픽셀 것
  • 사업부 : 두 개의 같은 값, {마진 : 50 픽셀 10px} - 10px 상단과 하단 여백은 왼쪽, 50 픽셀되며 오른쪽 여백이 될 것입니다
  • DIV {마진 : 50 픽셀 10px 20 픽셀}과 같은 세 가지 값 - 위쪽 여백이 50 픽셀, 왼쪽 및 오른쪽 여백이 10px 될 것입니다 될 것입니다, 아래쪽 여백이 될 것입니다 20 픽셀
  • 사업부 : 같은 네 개의 값, {마진 : 50 픽셀 10px 20 픽셀 30 픽셀} - 위쪽 여백이 50 픽셀 것, 오른쪽 여백이 10px 것, 아래쪽 여백이 20 픽셀 될 것입니다, 왼쪽 여백이 될 것입니다 30 픽셀

마진 속성과 요소 주위의 패딩 속성 삽입 공간 모두. 그러나 차이는 패딩은 요소의 테두리 내에서 공간을 삽입하면서 마진이 국경 주변의 공간을 삽입하는 것입니다.

브라우저 지원

Internet ExplorerFirefoxOperaGoogle ChromeSafari

여백 속성은 모든 주요 브라우저에서 지원됩니다.

통사론

여백 속성을 반환합니다 :

object .style.margin

여백 속성을 설정합니다 :

object .style.margin=" 속성 값
값 기술
% 부모 요소의 폭 %의 마진을 정의
length 길이 단위로 여백을 정의합니다
auto 브라우저가 여백을 설정합니다 (all four margins will be equal)
initial 기본값으로이 속성을 설정합니다. 초기 읽기에 대한
inherit 부모 요소에서이 속성을 상속합니다. 대한 상속 읽기

기술적 세부 사항

기본값: 0
반환 값 : 요소의 여백을 나타내는 문자열
CSS 버전 CSS1

더 예

예

(A)의 네 마진 변경 <div> 에 요소를 "25px" :

document.getElementById("myDiv").style.margin = "25px";
»그것을 자신을 시도

예

a의 마진을 돌려 <div> 요소를 :

alert(document.getElementById("myDiv").style.margin);
»그것을 자신을 시도

예

마진 속성과 패딩 속성의 차이 :

function changeMargin() {
    document.getElementById("myDiv").style.margin = "100px";
}

function changePadding() {
    document.getElementById("myDiv2").style.padding = "100px";
}
»그것을 자신을 시도

관련 페이지

CSS 자습서 : CSS의 여백

CSS 참조 : margin property

<스타일 개체