HTML 填充
一般来说，Padding 是指任何事物之间的空间，就像 HTML 中指的是 HTML 内容与其边框之间的空间一样。 HTML 填充也是使网页更具吸引力并突出显示网站的属性。它还有一些类型，如 padding-top、padding-left、padding-right、padding-bottom 等。我们可以以类似类型的 padding 格式对齐单词或文本。填充在 HTML 元素内创建额外的空间，并且边距也为 HTML 元素创建额外的空间。我们还对所有填充区域使用 CSS 样式及其属性。
语法：
每个 HTML 标签都有其元素的属性和属性。同样，语法也不同，如果用户要求需要，它们将用于所有其他 HTML 标记。以下是 HTML 中填充元素的基本语法。
<html>
<head>
<style>
.sample
{
Font-size:1 px;
Background-color:green;
Margin:28px;
Padding:30 px;
}
</style>
</head>
<body>
</body>
</html>上述语法有助于创建示例网页，并将在 HTML 的 head 部分使用 CSS 样式中的填充样式。基于此，如果我们在 HTML 的其他部分和标签中使用它，语法将会有所不同。
填充在 HTML 中如何工作？
与 margin 相比，Padding 是在某些 HTML 元素内部创建的额外空间，但 margin 是在 HTML 元素外部创建的。每个元素，例如 Padding 和 margin，都是指 Padding、margins 和 border 与 HTML 容器的盒子模型组合而成的盒子模型。在该模型中，如果用户需要在网页中进行定制开发，则用于 HTML 内容（即文本或图像、视频等）的区域的中间部分会用一些内边距、边距和边框包围。
我们不会在必要时使用所有这些，但记住盒模型应用于网页上的每个标签或元素是有益的。某些 CSS 样式和属性允许用属性数量替换一串值，并且它们用用空格分隔的值表示。
盒子内部边距和边框区域以及HTML内容区域之外的Padding，padding属性，用于指定盒子容器内统一的填充样式。根据我们在代码中的声明和客户要求，独立指定三个或四个值。
计算 Padding 的长度时，需要考虑某些允许的值，确保它们不是负数；另外，计算包含框宽度和高度且不包含负值的百分比。我们可以在 HTML 网页的图像端使用 Padding，帮助在图像和数据流（如 HTML 内容）之间创建缓冲区。它给图像提供了很小的呼吸空间，因此它们不会卡在文本或其他图像中。
我们通常将图像放置在网页的左侧，紧密附着数据内容。没有任何令人分心的接近图片。尽管如此，当在右侧面板中使用相同的图像时，填充会在图像和文本之间创建一个缓冲区；从用户的角度来看，这将有助于获得愉快的阅读体验。我们还可以使用编辑操作（例如具有某些样式属性的 HTML 编辑器）在图像画布中添加 Padding，并在用户选择图像后切换到富文本编辑器。
我们根据用户或客户的指示，在我们选择或作为图像内容上传到网页的图像的所有侧面添加选择性填充，例如 10 像素边框；另外，我们可以根据用户的需求，通过使用一些填充样式来选择性地添加填充，例如 padding-bottom 选项到 padding-right 。
4 个填充值
我们可以在 javascript 函数中使用 Padding，在 HTML 代码中调用 javascript 函数后自动创建边框样式或填充样式并调整其大小。通常，padding 属性设置或返回 HTML 元素的 Padding，该属性从单个值到四个值；我们将在下面讨论每个填充值。
- 单个值： 例如 div{padding:12px} - HTML 内容的所有四个边都将具有类似于 12 px 的填充值。
- 两个值： div{padding:12px 13px} - 顶部和底部 Padding 为 12px，左右 padding 为 13px。
- 三个值： div{padding:12px 13px 14px} - 顶部 Padding 为 10px，左右 Padding 为 13px，底部 Padding 为 14px。
- 四个值： div{padding:12px 13px 14px 15px} - 顶部 Padding 为 12px，右侧 Padding 为 13px，底部 Padding 为 14px，左侧 Padding 为 15px。
HTML 填充示例
HTML Padding 的示例如下：
示例#1
代码：
<html>
<head>
<style>
.sample {
border: 2px solid green;
padding: 34px;
}
.sample2 {
border: 4px solid green;
margin: 37px;
}
</style>
</head>
<body>
<p class="sample">Welcome To My Domain</p>
<p class="sample2">Welcome To My Domain</p>
<p><strong>Welcome</strong>To My Domain User!</p>
</body>
</html>输出：
Example #2
Code:
<html>
<head>
<style>
.sample {
border: 2px solid green;
padding: 34px;
}
.sample2 {
border: 4px solid green;
margin: 37px;
}
</style>
</head>
<body>
<img src="download.jpg" style="padding:33px;float:left">
<p class="sample">Welcome To My Domain</p>
<p class="sample2">Welcome To My Domain</p>
<p><strong>Welcome</strong>To My Domain User!</p>
</body>
</html>Output:
Example #3
Code:
<html>
<head>
<style>
#sample {
border: 2px solid green;
padding: 34px;
}
.sample2 {
border: 4px solid green;
margin: 37px;
}
</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 = "2px 3px 4px 5px";
}
</script>
</body>
</html>Output:
The first example illustrates the fundamental concept of Padding. In the second example, we incorporate additional images into the web pages using padding styles. The final example is using javascript functions to set or resize the padding styles automatically.
Conclusion
We already discussed some HTML concepts in real-time scenarios, whichever we are using HTML tags in web pages, not only in web mode but also on user compatibility; it will accept the mobile (both android and ios) modes based on user requirements.
以上是HTML 填充的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
