DOM样式margin属性用于设置或返回元素的margin。我们可以为各个边(上,右,下,左)设置不同的边距大小。
保证金属性可以具有以下值:
- 长度(厘米,像素,磅等)
- 元素的宽度%。
- 浏览器计算的保证金:自动。
用法:
- 用于设置边距属性。
object.style.margin = "%|length|auto|initial|inherit"
- 它用于获取保证金属性。
object.style.margin
属性值:
值 | 描述 |
---|---|
% | 定义与父元素相比的百分比长度。 |
length | 定义长度为ubit的长度。 |
auto | 这是默认值。 |
initial | 定义初始默认值。 |
inherit | 从父元素继承。 |
返回值:它返回一个字符串值,该字符串值表示元素的顶部,右侧,底部,左侧空白。
示例1:保证金属性设置为四个值80px 40px 20px 90px,这意味着top = 80px,
右侧= 40像素,底部= 20像素,左侧= 90像素。
<html>
<head>
<title>
HTML | DOM Style margin Property
</title>
<style>
h1 {
coor:green;
}
#GFG {
border:2px solid green;
}
</style>
</head>
<body>
<center>
<h1>
GEEKSFORGEEKS
</h1>
<h2>
DOM Style margin Property
</h2>
<p id="GFG">
Margin properties
</p>
<br>
<BUTTON ONCLICK="Geeks()">Submit</BUTTON>
<script>
function Geeks() {
document.getElementById("GFG").style.margin =
"80px 40px 20px 90px";
}
</script>
</body>
</html>
输出:
- 在单击按钮之前:
- 单击按钮后:
示例2:将所有四个边距更改为单个边距:25px;表示顶部,右侧,底部和左侧= 25px
<html>
<head>
<title>
HTML | DOM Style margin Property
</title>
<style>
h1 {
coor:green;
}
#GFG {
border:2px solid green;
margin:60px 20px 90px 100px;
}
</style>
</head>
<body>
<center>
<h1>
GEEKSFORGEEKS
</h1>
<h2>
DOM Style margin Property
</h2>
<p id="GFG">
Margin properties
</p>
<br>
<BUTTON ONCLICK="Geeks()">Submit</BUTTON>
<script>
function Geeks() {
document.getElementById("GFG").style.margin =
"25px";
}
</script>
</body>
</html>
输出:
- 在单击按钮之前:
- 单击按钮后:
支持的浏览器:以下列出了DOM Style margin属性支持的浏览器:
- 谷歌浏览器1.0
- Internet Explorer 4.0
- Firefox 1.0
- Opera 3.5
- 苹果Safari 1.0
相关用法
- CSS margin-right用法及代码示例
- CSS margin-top用法及代码示例
- HTML Style right用法及代码示例
- HTML Style top用法及代码示例
- CSS margin-left用法及代码示例
- CSS shape-margin用法及代码示例
- CSS margin-bottom属性用法及代码示例
- HTML Style unicodeBidi用法及代码示例
- HTML Style visibility用法及代码示例
- HTML Style clip用法及代码示例
- HTML Style order用法及代码示例
- HTML Style minWidth用法及代码示例
- HTML Style borderImage用法及代码示例
- HTML Style borderColor用法及代码示例
- HTML Style backgroundSize用法及代码示例
注:本文由纯净天空筛选整理自ManasChhabra2大神的英文原创作品 HTML | DOM Style margin Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。