HTML 左边距

王林原创: 2024-09-04 16:48:19781浏览

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 左边距

上面的三个例子将给出margin属性的三种不同用法；第一个示例使用 CSS 样式和 HTML 的基本 margin 属性。第二个示例创建 HTML 表格并设置网页的 margin-left 属性值。最后一个示例遵循相同的过程，但 JavaScript 自动设置边距值。

结论

在HTML中，我们看到margin属性类型为margin-left；在此基础上，我们修改了 HTML 表格、图像和视频；另外，我们将在 HTML 文档中对齐布局并将其设置为左边距。某些元素在浏览器兼容性方面不支持 HTML5。

以上是HTML 左边距的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript html5 css html Object if for include auto using class Length Attribute Property default dom this display margin padding table td tr

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：HTML Favicon 下一篇：Combobox in HTML

查看更多