HTML 左边距-html教程-PHP中文网

HTML 左边距

王林

发布： 2024-09-04 16:48:19

原创

727 人浏览过

HTML margin-left 设置元素左侧的边距区域。 HTML 有许多预定义的标签，用于更有效地创建网页，此外，CSS 样式在网站中更加高级和装饰。通过使用这个术语，用户会更频繁地吸引网站，因此对商业角度很有帮助。 Html 边距属性是帮助创建 HTML 网页屏幕外部空间的功能之一，此外，它们还有一些不同的类型，如左边距、右边距、上边距和下边距；这些是决定网页轮廓空间布局的一些类型。每种类型都有其可能的长度值。

语法:

Html 页边距根据我们在文档中使用的位置而具有不同的样式。如果我们使用 HTML 边距，则使用 CSS 样式文档作为边距。

<html>
<head>
<style>
div
{
Margin:values;
}
</style>
</head>
</html>

登录后复制

以上代码是我们将要讨论的网页 HTML 边距样式的基本语法。在 HTML 中，dom 模式主要用于在代码后端工作的 HTML 对象。Html 边距取决于网页文档上应用的不同边距的元素。我们可以使用javascript函数来自动设置网页上的边距。

HTML 左边距如何工作？

边距使用 HTML 和 CSS 标准样式单位指定固定长度；网页上甚至允许负值。在此之前，我们将把 margin-left 属性设置为一些值，我们将分配或在文档中分配默认值。默认值为“auto”，否则我们将把这些值声明为“inherit”、“length”和“percentage” 每个具有不同子值集的指定值将使用 margin-left 属性价值观。

长度将计算CSS单元的长度或固定长度。我们根据 HTML 块计算宽度和高度的百分比。该字段也允许负值。如果假设margin有一个top value属性，用户浏览器会将该值作为宽度的百分比；它不会指定块的高度。

用户浏览器将自动计算margin-left值；这取决于文档或网页外部区域的可用空间。继承值主要用于HTML内容的父子关系；它用值指定 margin-left 属性的宽度。在计算网页中HTML元素的高度和宽度时，我们主要不考虑边距的计算；我们包括其他 HTML 元素，如内边距、其他内容区域、边框等。仅计算文档的 HTML 元素 margin-size 属性的可用空间。

假设我们在 HTML 中声明两组发生冲突的边距。例如，我们分配一个具有右边距和仅在右侧浮点的块，并分配另一个具有与其浮点相同的左边距的块。较大的裕度点保持不变，并且不会转变为较小的值。在这种情况下，块的较小边距区域会折叠，可能无法在网页上正确显示，甚至可能从网页屏幕上消失。一般来说，边距是透明的。

我们使用 margin 作为简写属性来指定宽度，而不是在集群代码中使用其他边距规范。这种方法简化了开发人员区域中的代码阅读。有时，我们可能会像其他边距类型一样设置边距底部值。例如，我们在 CSS 样式中将一个类与另一个类区分开来。我们可以指定每个属性可能的长度值，只要我们在 HTML 标签中使用的元素的长度值相等，并且与文本字体和元素字体的高度相关。

在 IE 4 或更高版本中向网页添加对象时，HTML 文档中的边距值将变为绝对值，而不是在使用浏览器时在兼容模式下假定 IE 版本 3 中对象边距的默认值。 HTML 表格元素

不支持 margin 属性值。和 IE 4 中的对象，但它可以在 IE 3 中工作。如果我们使用

将边距值应用到表格单元格中，或

IE 4 版本中的标签。

HTML 左边距示例

以下是 HTML 左边距示例：

示例#1

代码：

<html>
<head>
<style>
{
margin: 2;
}
div {
width: 210px;
height: 130px;
background:green;
border-radius: 13px;
}
.sample {
background-color: green;
margin-left: 3%;
}
.sample1 {
background-color: yelllow;
}
.sample2 {
background-color: solid green;
margin-left: -13%;
}
</style>
</head>
<body>
<div id="sample2">
<marquee> Welcome To My Domain</marquee>
</div>
</body>
</html>

登录后复制

输出：

HTML 左边距

示例#2

代码：

<html>
<head>
<style>
#sample {
width: 120%;
}
table, td, th {
border: 3px solid green;
}
table {
width: 212px;
float: left;
margin: 23px 42px;
}
</style>
</head>
<div id="sample">
<table>
<tr>
<th>Mobile Number</th>
<th>Name</th>
</tr>
<tr>
<td>8220244056</td>
<td>Siva</td>
</tr>
<tr>
<td>9075854876</td>
<td>Raman</td>
</tr>
</table>
<p>
<marquee>Welcome To My Domain</marquee>
</p>
</div>
</html>

登录后复制

输出：

HTML 左边距

示例 #3

代码：

<html>
<head>
<style>
#sample {
width: 120%;
}
table, td, th {
border: 3px solid green;
}
table {
width: 212px;
float: left;
margin: 23px 42px;
}
</style>
</head>
<div id="sample">
<table>
<tr>
<th>Mobile Number</th>
<th>Name</th>
</tr>
<tr>
<td>8220244056</td>
<td>Siva</td>
</tr>
<tr>
<td>9075854876</td>
<td>Raman</td>
</tr>
</table>
<button type="button" onclick="samples()">Set margin</button>
</div>
<script>
function samples() {
document.getElementById("sample").style.margin-left = "11px 23px 34px 47px";
}
</script>
</html>

登录后复制

输出：

HTML 左边距