HTML DOM 스타일 패딩 속성
스타일 개체 정의 및 사용
속성 세트를 패딩이나 패딩 요소를 반환합니다.
이 속성은 값 1-4 종류의 사용할 수 있습니다 :
- 사업부 : 당신은 예를 들어 값을 지정하면 {패딩 : 50 픽셀} - 모든 내 사 마진은 50 픽셀입니다.
- 두 값을 지정하는 경우, 예를 들면 다음과 같습니다 사업부 {패딩 : 50 픽셀 10px} - 네네의 상단과 하단 여백을 50 픽셀, 왼쪽 및 오른쪽 여백과 여백이 10px입니다.
- 사업부 {패딩 : 50 픽셀 10px 20 픽셀} 당신은 예를 들어 세 개의 값을 지정하는 경우 - 여백이 50 픽셀입니다 내에서, 왼쪽 및 오른쪽 여백과 여백이 10px입니다, 바닥 패딩은 20 픽셀입니다.
- 사업부 : 당신은 같은 값을 네 가지 종류 지정하면 {패딩 : 50 픽셀 10px 20 픽셀 30 픽셀} - 여백이 50 픽셀이고, 오른쪽 여백이 10px입니다 내 바닥 패딩이 20 픽셀이며, 왼쪽 여백을 30 픽셀입니다.
문법
패딩 속성 설정 :
Object.style.padding="%|length|inherit"
위로 패딩 속성 :
Object.style.padding
| 值 | 描述 |
|---|---|
| % | 定义基于父元素宽度的百分比内边距。 |
| length | 使用 px、cm 等单位定义内边距的宽度。 |
| inherit | 内边距从父元素继承。 |
브라우저 지원
모든 주요 브라우저는 패딩 속성을 지원합니다.
참고 : IE7 및 이전 버전은 "상속"값을 지원하지 않습니다.IE8은 "상속"지원!의 DOCTYPE을 제공합니다. IE9 지원 "상속".
팁과주의 사항
마진 속성과 패딩 속성은 요소 주위의 공간에 삽입됩니다. 그러나, 차이는 마진 소자 경계 내의 경계 외부 패딩 삽입 공간의 주위의 공간에 삽입 될 것이다.
예
예
여백 내에서 DIV 요소를 변경 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<style type="text/css">
div{
border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin(){
document.getElementById("ex1").style.margin="100px";
}
function changePadding(){
document.getElementById("ex2").style.padding="100px";
}
</script>
</head>
<body>
<div id="ex1">这是一些文本。</div>
<br>
<button type="button" onclick="changeMargin()">修改div元素的外边距</button>
<br>
<br>
<div id="ex2">这是一些文本。</div>
<br>
<button type="button" onclick="changePadding()">修改div元素的内边距</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<style type="text/css">
div{
border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin(){
document.getElementById("ex1").style.margin="100px";
}
function changePadding(){
document.getElementById("ex2").style.padding="100px";
}
</script>
</head>
<body>
<div id="ex1">这是一些文本。</div>
<br>
<button type="button" onclick="changeMargin()">修改div元素的外边距</button>
<br>
<br>
<div id="ex2">这是一些文本。</div>
<br>
<button type="button" onclick="changePadding()">修改div元素的内边距</button>
</body>
</html>
»시도
스타일 개체