0Pricing
HTML for Kids · 课时

内边距

内边距

内边距 是 CoddyKit 上的免费 HTML for Kids 课时。 这是第 1 节课，共 1 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML for Kids 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML for Kids 课程共包含 1 节课。

简介

您好：

欢迎学习 CSS 内边距课程。

内边距用于在 HTML 元素的边界以内创建空白区域。

与外边距一样，我们可以为元素设置四个方向的内边距。

百分比类型

在之前的示例中，我们为内边距指定了 px 类型的固定值。与外边距一样，我们也可以设置百分比类型的值。

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  background-color: lightblue;
  padding-top:10%;
  padding-right: 10%;
  padding-left: 10%;
  padding-bottom:10%;
  border: 1px solid black;
}
</style>
</head>
<body>

<div class="box">
    We assign percentage type 
     padding to this div element.
</div>

</body>
</html>
内边距 — 插图 2

缩短代码

与外边距一样，内边距也可以使用简写语法在一行中定义。

可以依次为上、右、下和左方向的内边距添加值，各个值之间用空格分隔。

查看示例代码，您会发现它与外边距的写法非常相似。

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  border: 1px solid black;
  padding: 20px 10px 25px 10px;
  background-color: powderblue;
}
</style>
</head>
<body>

<div class="box">
   Lorem ipsum dolor sit amet, 
   consectetur
</div>

</body>
</html>

恭喜

恭喜您 🎉

在本部分中，我们学习了 CSS 外边距。

下一部分中，我们将学习颜色和背景。

内边距 — 插图 4

常见问题解答

「内边距」课时是免费的吗？

是的 — 「内边距」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML for Kids 课程的其余内容，请升级到 CoddyKit PRO。 HTML for Kids 课程共包含 1 节课。

「内边距」这节课中我会学到什么？

内边距 你通过在浏览器中直接运行的动手代码来练习 HTML for Kids，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML for Kids 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML for Kids 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 1 节。

「内边距」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML for Kids 课中编写并运行代码吗？

能。每节 HTML for Kids 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

← 返回 HTML for Kids