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