Style marginTop 속성

정의와 사용법

marginTop 속성을 설정하거나 요소의 상단 외곽 마argins을 반환합니다.

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

추가로 참조하십시오：

CSS 강의：CSS 외곽 여백

CSS 참조 가이드：margin-top 속성

HTML DOM 참조 가이드：margin 속성

예제

예제 1

<div> 요소의 상단 외곽 마argins 설정：

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

직접 시도해 보세요

예제 2

<div> 요소의 상단 외곽 마argins을 "normal"로 되돌립니다：

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

직접 시도해 보세요

예제 3

반환 <div> 요소의 상단 외곽 마argins：

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

직접 시도해 보세요

예제 4

marginTop과 paddingTop의 차이：

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

직접 시도해 보세요

문법

marginTop 속성 반환：

object.style.marginTop

marginTop 속성 설정：

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

속성 값

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

기술 세부 사항

기본 값： 0
반환 값： 문자열로, 요소의 상단 외곽 마argins을 나타냅니다.
CSS 버전： CSS1

브라우저가 지원

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