proprietà margin HTML DOM Style
Style Objects Definizione e utilizzo
insiemi di proprietà di margine o ritorni dagli elementi esterni.
Questa proprietà può essere utilizzata 1-4 tipi di valori:
- Se si specifica un valore, ad esempio: div {margin: 50px} - tutti e quattro i margini sono 50px.
- Se vengono specificati entrambi i valori, per esempio: div {margin: 50px 10px} - il margine e il margine inferiore è 50px, margine sinistro e il margine destro è 10px.
- Se si specificano tre valori, per esempio: div {margin: 50px 10px 20px} - il margine è 50px, margine sinistro e il margine destro è 10px, margine inferiore è 20px.
- Se si specifica quattro tipi di valori, come: div {margin: 50px 10px 20px 30px} - il margine è 50px, il margine destro è 10px, margine inferiore è 20px, margine sinistro è 30px.
grammatica
Impostare le proprietà dei margini:
Object.style.margin="%|length|auto|inherit"
Restituisce le proprietà dei margini:
Object.style.margin
| 值 | 描述 |
|---|---|
| % | 定义基于父元素宽度的百分比外边距。 |
| length | 使用 px、cm 等单位定义外边距的宽度。 |
| auto | 浏览器设定的外边距（所有四个外边距是相等的）。 |
| inherit | 外边距从父元素继承。 |
Supporto per il browser
Tutti i browser principali supportano proprietà dei margini.
Nota: IE7 e versioni precedenti non supportano il valore "ereditare".IE8 fornisce solo! DOCTYPE supportato "ereditare". supporto IE9 "ereditare".
Suggerimenti e Note
proprietà margine e proprietà del cuscinetto vengono inseriti nello spazio attorno all'elemento. Tuttavia, la differenza è, margine sarà inserito nello spazio intorno alla parte esterna del bordo, spazio inserti imbottitura all'interno del bordo dell'elemento.
Esempi
Esempi
Modifica elemento margini 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>
Prova »
Style Objects