码农教程 - 一技在手,衣食无忧! tools

目录

CSS 内边距

❮ 上一节 下一节 ❯

内边距用于在元素内容周围、任何定义的边框内创建空间。

该元素的内边距为 70 像素。

亲自试一试 »

CSS 内边距

CSSpadding属性用于在元素内容周围、任何定义的边框内生成空间。

使用 CSS，您可以完全控制内边距。有一些属性可用于设置元素每一侧（顶部、右侧、底部和左侧）的内边距。

内边距 - 各个侧面

CSS 具有用于指定元素每一侧的内边距的属性：

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

所有内边距属性都可以具有以下值：

  • 长度- 指定以 px、pt、cm 等为单位的内边距。
  • %- 指定包含元素宽度的百分比内边距
  • 继承 - 指定内边距应从父元素继承

笔记：不允许使用负值。

示例

为 <div> 元素的所有四个边设置不同的内边距：

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
亲自试一试 »

内边距 - 简写属性

为了缩短代码，可以在一个属性中指定所有内边距属性。

这个paddingproperty 是以下各个内边距属性的简写属性：

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

那么，它的工作原理如下：

如果padding属性有四个值：

  • 内边距：25px 50px 75px 100px；
    • 顶部内边距为 25px
    • 右内边距为 50px
    • 底部内边距为 75px
    • 左内边距为 100px

示例

使用具有四个值的 padding 简写属性：

div {
  padding: 25px 50px 75px 100px;
}
亲自试一试 »

如果padding属性具有三个值：

  • 内边距：25 像素 50 像素 75 像素；
    • 顶部内边距为 25px
    • 左右内边距均为 50px
    • 底部内边距为 75px

示例

使用具有三个值的 padding 简写属性：

div {
  padding: 25px 50px 75px;
}
亲自试一试 »

如果padding属性有两个值：

  • 内边距：25px 50px；
    • 顶部和底部内边距均为 25px
    • 左右内边距均为 50px

示例

使用具有两个值的 padding 简写属性：

div {
  padding: 25px 50px;
}
亲自试一试 »

如果padding属性有一个值：

  • 内边距：25px；
    • 所有四个内边距均为 25px

示例

使用具有一个值的 padding 简写属性：

div {
  padding: 25px;
}
亲自试一试 »

内边距和元素宽度

CSSwidth属性指定元素内容区域的宽度。内容区域是元素的内边距、边框和边距内的部分（盒子模型）。

因此，如果某个元素具有指定的宽度，则添加到该元素的内边距将添加到该元素的总宽度中。这通常是不希望有的结果。

示例

此处，<div> 元素的宽度为 300px。但是， <div> 元素的实际宽度将为 350px（300px + 左内边距 25px + 右内边距 25px）：

div {
  width: 300px;
  padding: 25px;
}
亲自试一试 »

为了将宽度保持在 300px，无论内边距量是多少，您可以使用 box-sizing属性。这会导致元素保持其实际宽度；如果增加内边距，可用的内容空间将会减少。

示例

使用 box-sizing 属性将宽度保持在 300px，无论内边距量是多少：

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}
亲自试一试 »

更多示例

设置左内边距
此示例演示如何设置 <p> 元素的左内边距。

设置正确的内边距
此示例演示如何设置 <p> 元素的右内边距。

设置顶部内边距
此示例演示如何设置 <p> 元素的顶部内边距。

设置底部内边距
此示例演示如何设置 <p> 元素的底部内边距。

通过练习测试一下

练习:

将 <h1> 元素的顶部内边距设置为 30 像素。

<style>
h1 {
  : 30px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

开始练习

所有 CSS 内边距属性

Property Description
padding A shorthand property for setting all the padding properties in one declaration
padding-bottom Sets the bottom padding of an element
padding-left Sets the left padding of an element
padding-right Sets the right padding of an element
padding-top Sets the top padding of an element

❮ 上一节 下一节 ❯