HTML DOM Style paddingTop property
Style Objects Definition and Usage
Margins on paddingTop property sets or returns the elements within.
Space padding property defines the element border and the element content between.
grammar
Setting paddingTop properties:
Object.style.paddingTop="%|length|inherit"
Back paddingTop properties:
Object.style.paddingTop
| 值 | 描述 |
|---|---|
| % | 定义基于父元素宽度的百分比上内边距。 |
| length | 使用 px、cm 等单位定义上内边距的宽度。 |
| inherit | 上内边距从父元素继承。 |
Browser Support
All major browsers support paddingTop property.
Note: IE7 and earlier versions do not support the "inherit" value.IE8 only provides! DOCTYPE supported "inherit". IE9 support "inherit".
Tips and Notes
margin properties and padding properties are inserted into the space around the element. However, the difference is, margin will be inserted into the space around the outside of the border, padding inserts space within the element border.
Examples
Examples
Change div elements on the inner margin:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "utf-8">
<Title> This tutorial (w3big.com) </ title>
<Style type = "text / css">
div {
border: 1px solid # FF0000;
}
</ Style>
<Script>
function changeMargin () {
document.getElementById ( "ex1") style.marginTop = "100px".;
}
function changePadding () {
document.getElementById ( "ex2") style.paddingTop = "100px".;
}
</ Script>
</ Head>
<Body>
<Div id = "ex1"> This is some text. </ Div>
<br>
<Button type = "button" onclick = "changeMargin ()"> Modify div element at the top of the outer spacing </ button>
<br>
<br>
<Div id = "ex2"> This is some text. </ Div>
<br>
<Button type = "button" onclick = "changePadding ()"> modifications within the top of the div element spacing </ button>
</ Body>
</ Html>
<Html>
<Head>
<Meta charset = "utf-8">
<Title> This tutorial (w3big.com) </ title>
<Style type = "text / css">
div {
border: 1px solid # FF0000;
}
</ Style>
<Script>
function changeMargin () {
document.getElementById ( "ex1") style.marginTop = "100px".;
}
function changePadding () {
document.getElementById ( "ex2") style.paddingTop = "100px".;
}
</ Script>
</ Head>
<Body>
<Div id = "ex1"> This is some text. </ Div>
<br>
<Button type = "button" onclick = "changeMargin ()"> Modify div element at the top of the outer spacing </ button>
<br>
<br>
<Div id = "ex2"> This is some text. </ Div>
<br>
<Button type = "button" onclick = "changePadding ()"> modifications within the top of the div element spacing </ button>
</ Body>
</ Html>
try it"
Style Objects