HTML 内边距与边距-html教程-PHP中文网

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

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

HTML Padding 与 Margin 比较表

示例 #1 – HTML 填充

示例 #2 – HTML 边距

结论

首页

web前端

html教程

HTML 内边距与边距

Sep 04, 2024 pm 04:19 PM

html html5 HTML Tutorial HTML Properties HTML tags

在 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 填充

代码：

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

登录后复制

输出：

HTML 内边距与边距

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

示例 #2 – HTML 边距

代码：

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