HTML | DOM 样式 marginBottom 属性(1)

📌 相关文章

📜 HTML | DOM 样式 marginBottom 属性(1)

📅 最后修改于: 2023-12-03 15:31:13.546000 🧑 作者: Mango

HTML | DOM 样式 marginBottom 属性

介绍

在HTML | DOM中，marginBottom属性控制元素的下边缘与其下一个元素之间的距离。该属性可以取值为具体的长度或百分比。

语法

object.style.marginBottom = "length|initial|inherit";

属性值

length：一个指定距离的长度值，比如：“10px”。
initial：设置属性为它的默认初始值。
inherit：从父元素继承该属性。

实例

<!DOCTYPE html>
<html>
<head>
	<title>HTML | DOM 样式 marginBottom 属性</title>
	<style type="text/css">
		div{
			background-color: #eee;
			padding: 10px;
			border: 1px solid #ddd;
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
	<div>这是第一个div元素</div>
	<div>这是第二个div元素</div>
	<div>这是第三个div元素</div>
	<div>这是第四个div元素</div>
</body>
</html>

解释

在这个例子中，我们设置了四个矩形框(div)并为它们添加了背景色、内边距、边框和下边距(marginBottom)。由于下边距是10px，所以每个矩形框之间的距离都是10px。这个例子中的下边距(marginBottom)可以通过修改样式表中div元素的marginBottom来调整。

浏览器兼容性

| Chrome | Firefox | IE | Opera | Safari | | ------ | ------- | -- | ----- | ------ | | 1.0 | 1.0 | 4 | 4.0 | 1.0 |

总结

HTML | DOM样式 marginBottom属性可以用于控制元素的下边缘与其下一个元素之间的距离。它可以为具体的长度或百分比。它在跨浏览器上的兼容性也非常好。