Style marginLeft 속성

정의와 사용 방법

marginLeft 속성을 설정하거나 요소의 왼쪽 외경을 반환합니다.

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

다른 참조물:

CSS 강의：CSS 외측 간격

CSS 참조 설명서：margin-left 속성

HTML DOM 참조 설명서：margin 속성

예제 1

<div> 요소의 왼쪽 외경 설정：

document.getElementById("myDiv").style.marginLeft = "50px";

직접 테스트해 보세요

예제 2

<div> 요소의 왼쪽 외경을 "normal"으로 되돌립니다：

document.getElementById("myDiv").style.marginLeft = "0px";

직접 테스트해 보세요

예제 3

<div> 요소의 왼쪽 외경 반환：

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

직접 테스트해 보세요

예제 4

marginLeft과 paddingLeft의 차이：

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

직접 테스트해 보세요

문법

marginLeft 속성 반환：

object.style.marginLeft

marginLeft 속성 설정：

object.style.marginLeft = "%|length|auto|inherit"

속성 값

값 설명
% 부모 요소의 너비 비율로 왼쪽 외경을 정의합니다。
length 길이 단위로 왼쪽 외경을 정의합니다。
auto 브라우저가 왼쪽 외경을 설정합니다。
initial 이 속성을 기본 값으로 설정합니다. 참조하십시오 initial。
inherit 이 속성을 부모 요소에서 상속받습니다. 참조하십시오 inherit。

기술 세부 사항

기본 값： 0
반환 값： 문자열, 요소의 왼쪽 외경을 나타냅니다.
CSS 버전： CSS1

브라우저가 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원