网站制作教程:CSS 填充属性

你的网络首码项目网 网站建设来源:你的网络首码项目网评论91字数 2070阅读模式

填充定义元素边框与其内容之间的间距。CSS填充的指定方式与边距类似-它可以为每一侧单独设置,也可以一次为所有边设置。

在所有侧面设置相同的填充

此示例使用填充速记属性在元素的所有边上设置相同的填充。文章源自你的网络首码项目网-https://www.youranweb.com/268.html

<!DOCTYPE html>
<title>Example</title>
<style>
  div {
    background: gold;
    padding: 20px;
  }
  div > p {
    background: white;
  }
</style>

<div>
  <p>
    所有四个边的填充 20 像素。
  </p>
</div>

设置每侧的填充

如果不希望对所有四条边应用相同的填充设置,或者希望每条边具有不同的填充,则可以使用以下属性:文章源自你的网络首码项目网-https://www.youranweb.com/268.html

填充顶部:padding-top文章源自你的网络首码项目网-https://www.youranweb.com/268.html

右填充:padding-right文章源自你的网络首码项目网-https://www.youranweb.com/268.html

填充底部:padding-bottom文章源自你的网络首码项目网-https://www.youranweb.com/268.html

左填充:padding-left文章源自你的网络首码项目网-https://www.youranweb.com/268.html

例:

<!DOCTYPE html>
<title>Example</title>
<style>
  div {
    background: gold;
    padding-top: 5px;
    padding-right: 60px;
    padding-bottom: 15px;
    padding-left: 30px;
  }
  div > p {
    background: white;
  }
</style>

<div>
  <p>
    每侧有不同的衬垫。
  </p>
</div>

速记属性

填充:padding属性是填充顶部:padding-top、右填充:padding-right、底部填充:padding-bottom和左填充:padding-left的简写。文章源自你的网络首码项目网-https://www.youranweb.com/268.html

<!DOCTYPE html>
<title>Example</title>
<style>
  div {
    background: gold;
    margin: 20px;
    padding: 5px 60px 15px 30px;
  }
  div > p {
    background: white;
  }
</style>

<div>
  <p>
    Different padding on each side.
  </p>
</div>

变化

同样,与边距一样,您不需要为所有四条边提供不同的值。可以提供一个、两个、三个或四个值。以下是它的工作原理:文章源自你的网络首码项目网-https://www.youranweb.com/268.html

如果只有一个值,则它适用于所有边。如果有两个值,则顶部和底部填充设置为第一个值,右填充和左填充设置为第二个值。如果有三个值,则顶部设置为第一个值,左侧和右侧设置为第二个值,底部设置为第三个值。如果有四个值,它们将分别应用于顶部、右侧、底部和左侧。文章源自你的网络首码项目网-https://www.youranweb.com/268.html

换句话说:文章源自你的网络首码项目网-https://www.youranweb.com/268.html

填充:10像素;文章源自你的网络首码项目网-https://www.youranweb.com/268.html

  • 所有四条边都有 10 个像素的填充。

填充:10像素 20像素;文章源自你的网络首码项目网-https://www.youranweb.com/268.html

  • 顶部和底部具有 10 像素的填充。
  • 右和左的填充为 20 像素。

填充:10像素 20像素 30像素;文章源自你的网络首码项目网-https://www.youranweb.com/268.html

  • 顶部是 10px
  • 左边和右边是20px
  • 底部为 30px

填充:10像素 20像素 30像素 40像素;文章源自你的网络首码项目网-https://www.youranweb.com/268.html

  • 顶部是 10px
  • 右边是20px
  • 底部为 30px
  • 左边是 40px

填充、边框和框模型

对元素应用填充(和边框)可能会影响该元素的大小。如果将元素设置为100像素宽,然后应用10像素的填充,则填充将把宽度增加到120像素。文章源自你的网络首码项目网-https://www.youranweb.com/268.html

这是因为默认的CSS框模型会向原始框大小添加填充和边框。它查看指定的宽度和高度,然后将任何边框和填充添加到该宽度和高度。文章源自你的网络首码项目网-https://www.youranweb.com/268.html

<!DOCTYPE html>
<title>Example</title>
<style>
  div {
    width: 150px;
    height: 50px;
  }
  .padding {
    padding: 20px;
    background: gold;
  }
  .no-padding {
    padding: 0;
    background: limegreen;
  }
</style>

<div class="padding">
  填充
</div>
<div class="no-padding">
  无填充
</div>

这可能是违反直觉的,并导致许多问题,试图使布局正常工作。在处理百分比时尤其令人困惑。例如,您将元素的宽度设置为100%,但边框和/或填充会将其推出宽度超过100%,从而有效地破坏您的设计。文章源自你的网络首码项目网-https://www.youranweb.com/268.html

这整个问题可以通过使用box-sizing属性来克服。更具体地说,使用 。box-sizing: border-box文章源自你的网络首码项目网-https://www.youranweb.com/268.html

<!DOCTYPE html>
<title>Example</title>
<style>
  div {
    width: 150px;
    height: 50px;
    box-sizing: border-box;
  }
  .padding {
    padding: 20px;
    background: gold;
  }
  .no-padding {
    padding: 0;
    background: limegreen;
  }
</style>

<div class="padding">
  Padding
</div>
<div class="no-padding">
  No padding
</div>

这会将框保持在指定的宽度/高度,并在指定的高度和宽度内绘制边框和填充。文章源自你的网络首码项目网-https://www.youranweb.com/268.html

许多开发人员喜欢更改所有HTML元素和伪元素的框模型。这可能很有帮助,因为它使框模型在所有元素中保持一致。文章源自你的网络首码项目网-https://www.youranweb.com/268.html

您可以使用以下代码执行此操作。

*, *:before, *:after {
  box-sizing: border-box;
}
相关文章
weinxin
你的网络首码项目网站长
本站旨在为广大网友提供一个免费、公开且和谐的互联网项目交流平台,所有文章均来自网络和网友投稿,不代表本站任何立场,请勿盲目下载注册参与,以免为您带来不必要的损失。
你的网络首码项目网

发表评论