Style margin 속성

정의와 사용법

margin 속성은 요소의 외경 간격을 설정하거나 반환합니다.

이 속성은 한 가지에서 네 가지 값을 취할 수 있습니다:

  • 한 가지 값, 예를 들어: div {margin: 50px} - 모든 네 가지 외경 간격은 50px
  • 두 가지 값, 예를 들어: div {margin: 50px 10px} - 상하 외경 간격은 50px, 좌우 외경 간격은 10px
  • 세 가지 값, 예를 들어: div {margin: 50px 10px 20px} - 상단 외경 간격은 50px, 좌우 외경 간격은 10px, 하단 외경 간격은 20px
  • 사람 값, 예를 들어: div {margin: 50px 10px 20px 30px} - 상단 외곽 마진은 50px, 우측 외곽 마진은 10px, 하단 외곽 마진은 20px, 좌측 외곽 마진은 30px입니다.

margin 속성과 padding 속성은 모두 요소 주위에 공간을 삽입합니다. 그러나 차이점은 margin이 경계 주위에 공간을 삽입하는 반면, padding은 요소의 경계 내부에 공간을 삽입하는 것입니다.

또는 참고:

CSS 강의:CSS 외경

CSS 참조 매뉴얼:margin 속성

실例

예제 1

<div> 요소의 모든 네 가지 외곽 마진을 설정합니다:

document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";

직접 시험해 보세요

예제 2

<div> 요소의 모든 네 가지 외곽 마진을 "25px"으로 변경합니다:

document.getElementById("myDiv").style.margin = "25px";

직접 시험해 보세요

예제 3

返回 <div> 요소의 외곽 마진:

alert(document.getElementById("myDiv").style.margin);

직접 시험해 보세요

예제 4

margin 속성과 padding 속성의 차이:

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

직접 시험해 보세요

문법

margin 속성 반환:

object.style.margin

margin 속성 설정:

object.style.margin = "%|length|auto|initial|inherit"

속성 값

값 설명
% 부모 요소의 너비의 퍼센트로 외곽 마진을 정의합니다.
length 길이 단위로 외곽 마진을 정의합니다.
auto 브라우저가 외곽 마진을 설정합니다(모든 네 가지 마진이 같습니다.).
initial 이 속성을 기본 값으로 설정합니다. 참고: initial.
inherit 부모 요소에서 이 속성을 继承합니다. 참고: inherit.

기술 세부 사항

기본 값: 0
반환 값: 문자열, 요소의 외곽 마진을 나타냅니다.
CSS 버전: CSS1

브라우저 지원

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
지원 지원 지원 지원 지원