HTML DOM propriété Style de marge
style Objets Définition et utilisation
ensembles de propriétés de marge ou les rendements des éléments extérieurs.
Cette propriété peut être utilisé 1-4 types de valeurs:
- Si vous spécifiez une valeur, par exemple: div {margin: 50px} - les quatre marges sont 50px.
- Si les deux valeurs sont spécifiées, par exemple: div {margin: 50px 10px} - la marge et la marge inférieure est 50px, la marge gauche et la marge de droite est 10px.
- Si vous spécifiez trois valeurs, par exemple: div {margin: 50px 10px 20px} - la marge est 50px, marge de gauche et la marge de droite est 10px, marge inférieure est 20px.
- Si vous spécifiez quatre types de valeurs, comme: div {margin: 50px 10px 20px 30px} - la marge est 50px, la marge de droite est 10px, marge inférieure est 20px, marge de gauche est 30px.
grammaire
Définissez les propriétés de marge:
Object.style.margin="%|length|auto|inherit"
Renvoie des propriétés de marge:
Object.style.margin
| 值 | 描述 |
|---|---|
| % | 定义基于父元素宽度的百分比外边距。 |
| length | 使用 px、cm 等单位定义外边距的宽度。 |
| auto | 浏览器设定的外边距（所有四个外边距是相等的）。 |
| inherit | 外边距从父元素继承。 |
support du navigateur
Tous les principaux navigateurs prennent en charge les propriétés de marge.
Note: IE7 et les versions antérieures ne supportent pas la valeur "inherit".IE8 ne fournit DOCTYPE! Supporté "inherit". soutien IE9 "inherit".
Trucs et astuces
propriétés de marge et les propriétés de remplissage sont insérés dans l'espace autour de l'élément. Cependant, la différence est, la marge sera insérée dans l'espace autour de l'extérieur de la frontière, des inserts de remplissage espace à l'intérieur de la frontière de l'élément.
Exemples
Exemples
Changement élément marges 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>
Essayez »
style Objets