如何在 HTML 中添加内边距

2025 年 3 月 25 日 | 阅读 5 分钟

如果想使用内部 CSS 在 Html 文档中添加内边距，则需要遵循以下步骤。通过这些简单的步骤，我们可以轻松地添加内边距。

步骤 1： 首先，我们需要在任何文本编辑器中输入 Html 代码，或打开要添加内边距的现有 Html 文件。

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Add the Padding in Html
</Title>
</Head>
<Body> 
Hello User!...
You are at JavaTpoint Site...
The text on which we want to add padding.
</Body> 
</Html>

步骤 2： 现在，我们需要将光标放在 Html 文档标题标签之后的 head 标签中，然后定义 <style> 标签，如以下代码块所示。

<Head>    
<Title>   
Add the Padding in Html
</Title>
<style>
</style>
</Head>

步骤 3： 现在，我们需要在要添加内边距的文本之前指定的 ID 选择器中定义内边距属性。

以下是五种不同的属性，我们可以从中应用于每一侧的内边距

i. Padding-left（左内边距）

如果只想对元素应用左内边距，那么我们需要在 ID 选择器中只使用 padding-left 属性。然后，我们只需为该属性设置一个值，如以下示例所示

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Add the left Padding in Html
</Title>
<style>
div {
  border: 3px solid blue;
  padding-left: 75px;
  background-color: yellow;
}
</style>
</Head>
<Body> 
Hello User!...
You are at JavaTpoint Site...
<div>
The text on which we add the 75pixel left padding.
</div>
</Body> 
</Html>

使用 padding-left 属性的上述代码的输出显示在以下截图中

ii. Padding-right（右内边距）

如果只想对元素应用右内边距，那么我们需要在 ID 选择器中只使用 padding-right 属性。然后，我们只需为该属性设置一个值，如以下示例所示

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Add the right Padding in Html
</Title>
<style>
div {
  border: 3px solid blue;
  padding-right: 250px;
  background-color: yellow;
}
</style>
</Head>
<Body> 
Hello User!...
You are at JavaTpoint Site...
<div>
The text on which we add the 250pixel right padding.
</div>
</Body> 
</Html>

使用 padding-right 属性的上述代码的输出显示在以下截图中

iii. Padding Top（上内边距）

如果只想对元素应用上内边距，那么我们需要在 ID 选择器中只使用 padding-top 属性。然后，我们只需为该属性设置一个值，如以下示例所示

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Add the Top Padding in Html
</Title>
<style>
div {
  border: 3px solid orange;
  padding-top: 25px;
  background-color: green;
}
</style>
</Head>
<Body> 
Hello User!...
You are at JavaTpoint Site...
<div>
The text on which we add the 25pixel top padding.
</div>
</Body> 
</Html>

使用 padding-top 属性的上述代码的输出显示在以下截图中

iv. Padding Bottom（下内边距）

如果只想对元素应用下内边距，那么我们需要在 ID 选择器中只使用 padding-bottom 属性。然后，我们只需为该属性设置一个值，如以下示例所示

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Add the Bottom Padding in Html
</Title>
<style>
div {
  border: 3px solid orange;
  padding-bottom: 250px;
  background-color: green;
}
</style>
</Head>
<Body> 
Hello User!...
You are at JavaTpoint Site...
<div>
The text on which we add the 250pixel bottom padding.
</div>
</Body> 
</Html>

使用 padding-bottom 属性的上述代码的输出显示在以下截图中

v. Padding（内边距）

如果想对所有四个侧面（上、下、左、右）应用不同的内边距，那么我们需要在 padding 属性中指定四个值。

如果我们指定两个值，那么 Html 编辑器会将第一个内边距应用于上和下，将第二个内边距应用于左和右。

如果我们只在 padding 属性中指定一个值，那么 Html 编辑器会将相同的内边距应用于所有四个侧面。

Padding 属性的示例

示例 1： 以下示例在 padding 属性中使用一个值，为所有四个侧面设置相同的内边距。

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Set one value to apply same padding 
</Title>
<style>
div {
  border: 3px solid gray;
  padding: 100px;
  background-color: orange;
}
</style>
</Head>
<Body> 
Hello User!...
You are at JavaTpoint Site...
<div>
The text on which we set the 100pixel padding to all the four side.
</div>
</Body> 
</Html>

示例 1 的输出显示在以下截图中

示例 2： 以下示例在 padding 属性中使用两个值，为相对的侧面设置相同的内边距。

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Specify two value to apply same padding on opposite sides 
</Title>
<style>
div {
  border: 3px solid black;
  padding: 100px 50px;
  background-color: gray;
}
</style>
</Head>
<Body> 
Hello User!...
You are at JavaTpoint Site...
<div>
This is a text on which we set the 100 pixel padding to top and bottom and 50 pixels to left and right side.
</div>
</Body> 
</Html>

示例 2 的输出显示在以下截图中

示例 3： 以下示例在 padding 属性中使用四个值，为所有四个侧面设置不同的内边距。

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Specify four value to apply different padding on opposite sides 
</Title>
<style>
div {
  border: 3px solid blue;
  padding: 10px 50px 75px 200px;
  background-color: red;
}
</style>
</Head>
<Body> 
Hello User!...
You are at JavaTpoint Site...
<div>
This is a text on which we set the 10 pixel padding to top, 50 pixel padding to right, 75 pixel padding to bottom and 200 pixels padding to left side.
</div>
</Body> 
</Html>

示例 3 的输出显示在以下截图中

下一主题Html 中 ul 的含义是什么

如何在 HTML 中添加内边距

Padding 属性的示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

如何在 HTML 中添加内边距

Padding 属性的示例

相关帖子

HTML 占位符

HTML Tab 标签

HTML 货币格式

HTML 多行注释

哪个内联属性用于指定样式

HTML 计算器

HTML 中 class 和 id 的区别

HTML 照片

HTML 文本框

如何在 HTML 中包含图片

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器