스타일 marginBottom 속성
예시
<div> 요소의 아래쪽 여백을 설정합니다.
document.getElementById("myDiv").style.marginBottom = "50px";
정의 및 사용
marginBottom 속성은 요소의 아래쪽 여백을 설정하거나 반환합니다.
margin 속성과 padding 속성은 모두 요소 주위에 공백을 삽입합니다. 그러나 차이점은 여백은 테두리 주위에 공백을 삽입하는 반면 패딩은 요소 테두리 안에 공백을 삽입한다는 것입니다.
브라우저 지원
Property | |||||
---|---|---|---|---|---|
marginBottom | Yes | Yes | Yes | Yes | Yes |
통사론
marginBottom 속성을 반환합니다.
object.style.marginBottom
marginBottom 속성을 설정합니다.
object.style.marginBottom = "%|length|auto|initial|inherit"
속성 값
Value | Description |
---|---|
% | Defines the bottom margin in % of the width of the parent element |
length | Defines the bottom margin in length units |
auto | The browser sets the bottom 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.marginBottom = "0px";
예시
<div> 요소의 아래쪽 여백을 반환합니다.
alert(document.getElementById("myDiv").style.marginBottom);
예시
marginBottom과 paddingBottom의 차이점:
function changeMargin() {
document.getElementById("myDiv").style.marginBottom = "100px";
}
function changePadding() {
document.getElementById("myDiv2").style.paddingBottom = "100px";
}
관련 페이지
CSS 튜토리얼: CSS 여백
CSS 참조: margin-bottom 속성
HTML DOM 참조: margin 속성
❮ 스타일 개체