首页 > 文章 > web前端 > HTML 内边距与边距

HTML 内边距与边距

王林原创: 2024-09-04 16:19:311048浏览

在 HTML 中，margin 和 padding 是用于分隔 HTML 内容中的元素的两个元素。 Margin 是 HTML 中元素的外部空间，而 padding 是元素的内部空间，但这两个概念都针对 HTML 元素的空间复杂度。所有 HTML 元素标记集都利用填充和边距来定义其属性和行为。它还可以识别使 HTML 文档（例如网页）从用户的角度更具吸引力的方法。

HTML 填充和边距之间的面对面比较（信息图表）

以下是 HTML Padding 与 Margin 之间的前 6 个比较：

HTML 内边距与边距

HTML 填充和边距之间的主要区别

让我们在以下几点讨论 HTML Padding 与 Margin 之间的一些关键区别：

HTML 内边距和边距代表与 HTML 元素中的空间和边框相关的两个属性。 padding 和 margin 都用于 CSS 样式；当我们在这两个属性中使用 CSS 样式时，它们就会有自己的行为。
用户应根据用户的需求将特定元素与 padding 属性关联起来，以实现元素内侧的空间。边距（margin）与填充（padding）也是一样的，但空间是根据用户规范位于网页文档的外侧。
如果我们指定 HTML 文档的边距类型，边距有不同的类型，如上、下、左、右。如果我们在 HTML 的边距和内边距中使用 CSS 样式，它们在网页上的作用将会更加强大。
设置元素顶部的 HTML margin-top 值应指定长度或百分比。子值指定并引用父元素的宽度，即 HTML 内容的八个。在 HTML 表格功能中，我们使用 HTML 中的填充，它有不同的类型，例如单元格填充和单元格间距。
在 HTML 表格中设置单元格填充和单元格间距值将为表格的 CSS 属性指定水平和垂直空间。有时，单元格间距属性不适用于 Internet Explorer 版本，如 7、8、9 等；使用 border-spacing 属性代替 cell-spacing 可以增强用户兼容性模式。为 border-spacing 属性指定 null 值，它还可以容纳其他潜在值，使其对单元格间距属性更加有利。
我们可以提到，HTML 表格中的属性值是单元格间距、边框间距和边框折叠的基本示例；这些属性与我们在 HTML 表格中使用的属性相同，以便在前端更具吸引力。
基于此，我们还提到了相同 HTML 表格中的填充和边距空间。我们还使用
;标签作为 HTML 中的预定义标签，但如果可能的话，我们还在用户屏幕中的嵌套 div 标签中使用填充空间和边距空间。
当我们在HTML表格中使用div标签时，我们将数据包装在表格单元格中，但是当我们在HTML表格的div标签中声明填充空间和边距空间时，该列的每个表格单元格都会得到统一，或者在前端屏幕中应该是升序格式。

HTML Padding 与 Margin 比较表

下表总结了 HTML Padding 与 Margin 之间的比较：

HTML Padding	HTML Margins
It is used to create the space inner side of the web pages in the HTML contents.	The outer side of the HTML contents in the web pages is declared using it.
It has different types like top, bottom, left and right paddings.	There are various types of margins, including top, bottom, left, and right margins.
It is mainly used for the CSS styles on the web pages.	Similarly, within CSS styles and certain HTML contents, margins are commonly utilized for the layout of web pages.
It coordinates and combines with the other HTML tags, which help in the attributes and behavior of the HTML web pages.	It also combines with the other HTML tags, helping in the attributes and behaviors of the HTML web pages.
The padding property sets the padding areas for all the four-sides of the HTML elements.	The margin property sets the margin areas on either top, bottom, left, or right based on the values we specified in the styles of documents.
We can use javascript to set the padding sizes in the web pages automatically.	We also use Javascript to set the margin length on the web pages automatically.

HTML 填充和 HTML 边距示例

以下是 HTML 填充和 HTML 边距的示例：

示例 #1 – HTML 填充

代码：

<html>
<head>
<style>
#sample {
border: 2px solid orange;
padding: 38px;
}
.sample2 {
border: 4px solid orange;
margin: 39px;
}
</style>
</head>
<body>
<div id="sample">Welcome</div>
<br>
<button type="button" onclick="samples()">To My Domain</button>
<script>
function samples() {
document.getElementById("sample").style.padding = "22px 23px";
}
</script>
</body>
</html>

输出：

HTML 内边距与边距

在上面的例子中，我们使用javascript自动设置网页中的padding大小；我们点击“to mydomain”图标，它会安排填充大小。

示例 #2 – HTML 边距

代码：

<html>
<head>
<style>
#sample {
border: 2px solid orange;
margin-left: 19%;
}
.sample2 {
border: 4px solid orange;
margin-top: 14%;
}
</style>
</head>
<body>
<div id="sample">Welcome</div>
<br>
<button type="button" onclick="samples()">set margins</button>
<script>
function samples() {
document.getElementById("sample").style.margin = "3%";
}
</script>
</body>
</html>

输出：

HTML 内边距与边距

在上面的同一示例中，我们使用 javascript 函数在单击按钮时自动设置边距值。

结论

HTML 填充和边距是创建具有视觉吸引力的网页和在前端面板中应用正式样式的关键组件。它将专注于应该灵活的专业内容，并且还将绘制用户输入值以在后端和前端正确对齐。 Javascript 和一些其他框架（如 Bootstrap 和 jquery 库）与这些 HTML 元素相结合。

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

JavaScript jquery css bootstrap html NULL define if for format using Length Attribute Property function margin padding border column input table

声明：

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

上一篇：HTML Form Attribute下一篇：Types of Tags in HTML

查看更多