스타일 여백 속성
예시
<div> 요소의 4개 여백을 모두 설정합니다.
document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";
정의 및 사용
margin 속성은 요소의 여백을 설정하거나 반환합니다.
이 속성은 1~4개의 값을 가질 수 있습니다.
- 하나의 값, 예: div {margin: 50px} - 네 여백은 모두 50px입니다.
- 다음과 같은 두 가지 값: div {margin: 50px 10px} - 위쪽 및 아래쪽 여백은 50px, 왼쪽 및 오른쪽 여백은 10px입니다.
- 다음과 같은 세 가지 값: div {margin: 50px 10px 20px} - 위쪽 여백은 50px, 왼쪽 및 오른쪽 여백은 10px, 아래쪽 여백은 20px
- 4개의 값, 예: div {margin: 50px 10px 20px 30px} - 위쪽 여백은 50px, 오른쪽 여백은 10px, 아래쪽 여백은 20px, 왼쪽 여백은 30px
margin 속성과 padding 속성은 모두 요소 주위에 공백을 삽입합니다. 그러나 차이점은 여백은 테두리 주위에 공백을 삽입하는 반면 패딩은 요소 테두리 안에 공백을 삽입한다는 것입니다.
브라우저 지원
Property | |||||
---|---|---|---|---|---|
margin | Yes | Yes | Yes | Yes | Yes |
통사론
margin 속성을 반환합니다.
object.style.margin
여백 속성을 설정합니다.
object.style.margin = "%|length|auto|initial|inherit"
속성 값
Value | Description |
---|---|
% | Defines the margins in % of the width of the parent element |
length | Defines the margins in length units |
auto | The browser sets the margins (all four margins will be equal) |
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> 요소의 네 여백을 모두 "25px"로 변경합니다.
document.getElementById("myDiv").style.margin = "25px";
예시
<div> 요소의 여백을 반환합니다.
alert(document.getElementById("myDiv").style.margin);
예시
margin 속성과 padding 속성의 차이점:
function changeMargin() {
document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
document.getElementById("myDiv2").style.padding = "100px";
}
관련 페이지
CSS 튜토리얼: CSS 여백
CSS 참조: 여백 속성
❮ 스타일 개체