📌  相关文章
📜  HTML | DOM 样式 marginLeft 属性(1)

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

HTML | DOM 样式 marginLeft 属性

介绍

marginLeft 属性是 HTML DOM 中的一种样式属性，用于设置元素的左外边距，它可以是一个固定值，也可以是一个百分比。

语法
object.style.marginLeft="10px|5%|auto";
属性值

|值 | 描述 | | :------------: | ------------- | | length| 指定一个固定的长度单位，比如400px | | %| 指定一个元素宽度的百分比，比如50% | | auto | 默认值，浏览器会自动计算外边距 |

实例演示
<!DOCTYPE html>
<html>
<head>
	<title>marginLeft 实例</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<h1 style="margin-left:100px;">这是左外边距为100px的标题</h1>
	<p style="margin-left:20%;">这是左外边距为20%的段落。</p>
	<div style="margin-left:auto;margin-right:auto;width:50%;border:1px solid black;">这是一个居中的 DIV。</div>
</body>
</html>
解释

对于上述演示，第一个 h1 元素的左外边距是一个长度单位，它将从左侧浏览器窗口边缘向右移动 100 像素。第二个 p 元素的左外边距是一个百分数，它将左侧外边距设置为其包含块宽度的 20%。最后一个 div 元素的左右外边距都设置为 auto，以居中该内联元素。

总结
  • marginLeft 属性设置元素的左外边距；
  • 它可以是一个固定值，也可以是一个百分比；
  • 默认值为 auto；
  • 使用时应避免使用内联样式，而是将样式移动到CSS文件中。