DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!
CSS 中的 padding
属性定义了 盒子模型 的最内层部分,在元素内容周围创建空间,位于任何已定义的边距和/或边框内。
填充值使用 长度 或百分比设置,不能接受负值。 所有填充属性的初始值或默认值为 0
。
以下是一个简单的示例
.box {
padding: 0 1.5em 0 1.5em;
}
上面的示例使用 padding
简写属性,该属性最多接受四个值,如以下所示
.box {
padding: <padding-top> || <padding-right> || <padding-bottom> || <padding-left>
}</padding-left></padding-bottom></padding-right></padding-top>
如果设置的值少于四个,则会根据已定义的值来推断缺失的值。 例如,以下两个规则集将获得相同的结果
.box {
padding: 0 1.5em;
}
.box {
padding: 0 1.5em 0 1.5em;
}
因此,如果只定义了一个值,则会将所有四个填充属性设置为相同的值
.box {
padding: 20px;
}
如果声明了三个值,则为 padding: [top] [left-and-right] [bottom];
。
可以使用完整写法声明任何单个填充属性,在这种情况下,您将为每个属性定义一个值。 因此,前面的示例可以改写如下
.box {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
填充和元素宽度计算
如果元素指定了宽度,则添加到该元素的任何填充都会增加元素的总宽度。 这通常是不希望的结果,因为它要求在每次调整填充时重新计算元素的宽度。(注意,这也发生在高度上,但在大多数情况下,最好不要给元素设置固定高度。)
例如
.box {
padding: 20px;
width: 400px;
}
在这个例子中,虽然 .box
元素的显式宽度为 400px,但元素在页面上呈现的实际宽度将为 440px。 这不仅考虑了 400px 的宽度,还考虑了 20px 的左填充和 20px 的右填充(在前面的示例中用填充简写定义)。
这是为了保持 400px 的内容空间,而不是 400px 的总元素宽度。 以下是一个演示此功能的 Pen
Check out this Pen!
这发生在所有使用的浏览器中,在标准模式下,但在 IE6 和 IE7 的怪异模式下不会发生(即,在 IE6 或 IE7 中显示的页面,其中没有声明 doctype 或其他导致怪异模式的事件)。
要解决此问题,从而无论填充量如何,宽度都保持在 400px,可以使用 box-sizing
属性
.box {
padding: 20px;
width: 400px;
box-sizing: border-box;
}
这会导致元素在增加填充的同时保持其 宽度,从而减少可用的内容空间。 以下是一个演示
Check out this Pen!
相关属性
其他资源
浏览器支持
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
是 | 是 | 是 | 是 | 是 | 是 | 是 |
嘿!这是一个很棒的网站,我从这里阅读中学到了很多。
想知道关于填充和边距属性的事情?
谢谢,很棒的网站,很棒的内容!
感谢这篇简单而不错的文章。
与填充内容相关,我在当前项目中遇到了一些情况。这是我第一次遇到这样的事情。我将填充设置为:5px。但是我的浏览器(我使用的是 Chrome 和 FF)显示错误,顶部和底部的填充比 5px 长很多。左侧和右侧的填充似乎是正确的。
你能告诉我我的 CSS 中可能哪里错了?谢谢。
似乎你的浏览器将你的填充值添加到了它自己的默认值,导致了你要求的比预期的更多填充 :p 你应该试试
normalize.css
谢谢
我学到了很多。
感谢您提供这篇文章。关于填充我有一个问题;如果我使用以下代码(只是为了测试),那么盒子的尺寸将是多少?为什么?
很棒的文章,我了解了关于使用 CSS 填充的大部分内容。
我在 YouTube 上看到一个非常有用的教程:https://www.youtube.com/watch?v=Jb3f2Un5Ru8
我正在寻找我在其中一个样式表中找到的 CSS 语法的解释。它看起来像这样,padding-%AlignStart: 20px;
这里 %AlignStart 是一个变量吗?它来自哪里,HTML 吗?我不知道我们能像这样传递变量到 CSS?你有没有看到关于 web 上解释这种语法的书籍或教程?这是完整的代码。
#pthdr2container #pthdr2home {
background: url(%Image(PT_HEADERLINK_HOME_ALT)) no-repeat scroll %AlignStart center transparent;
padding-%AlignStart: 22px;
}
在制作网站的正常日子里,我的盒子模型错误出现了,看来我无法输入简写代码,它只是显示无效值的错误,你能修复一下吗?
如何使用 CSS 创建顶部的 h1,而不使用负值或边距?
任何人都可以帮我解决这个问题。
提前感谢。
不幸的是,你不能不使用 JavaScript 来实现。抱歉。
您好,
您是否知道简写语法的浏览器支持?
padding: [value] [value] [value]
它在所有平台上都支持:https://caniuse.cn/#feat=css3-boxsizing