스타일 marginLeft 속성
예시
<div> 요소의 왼쪽 여백을 설정합니다.
document.getElementById("myDiv").style.marginLeft = "50px";
정의 및 사용
marginLeft 속성은 요소의 왼쪽 여백을 설정하거나 반환합니다.
margin 속성과 padding 속성은 모두 요소 주위에 공백을 삽입합니다. 그러나 차이점은 여백은 테두리 주위에 공백을 삽입하는 반면 패딩은 요소 테두리 안에 공백을 삽입한다는 것입니다.
브라우저 지원
Property | |||||
---|---|---|---|---|---|
marginLeft | Yes | Yes | Yes | Yes | Yes |
통사론
marginLeft 속성을 반환합니다.
object.style.marginLeft
marginLeft 속성을 설정합니다.
object.style.marginLeft = "%|length|auto|inherit"
속성 값
Value | Description |
---|---|
% | Defines the left margin in % of the width of the parent element |
length | Defines the left margin in length units |
auto | The browser sets the left margin |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
기술적 세부 사항
기본값: | 0 |
---|---|
반환 값: | 요소의 왼쪽 여백을 나타내는 String |
CSS 버전 | CSS1 |
더 많은 예
예시
<div> 요소의 왼쪽 여백을 다시 "normal"로 변경합니다.
document.getElementById("myDiv").style.marginLeft = "0px";
예시
<div> 요소의 왼쪽 여백을 반환합니다.
alert(document.getElementById("myDiv").style.marginLeft);
예시
marginLeft와 paddingLeft의 차이점:
function changeMargin() {
document.getElementById("myDiv").style.marginLeft = "100px";
}
function changePadding() {
document.getElementById("myDiv2").style.paddingLeft = "100px";
}
관련 페이지
CSS 튜토리얼: CSS 여백
CSS 참조: margin-left 속성
HTML DOM 참조: margin 속성
❮ 스타일 개체