如何在网站的元素周围应用CSS填充

创建用户友好的网站是关于在设计美学和功能之间实现理想的平衡 - 你不能没有另一个。

为了自定义您的网站设计，您需要更改样式表文件。层叠样式表(CSS)是用于影响网站设计的编码语言。

你可以使用CSS将动画添加到您的网站，解决界面挑战，否则欣赏您的访客。建立一个伟大的用户体验并不总是这种魅力，但网络设计的各个方面都很重要 - 甚至似乎似乎不重要，因为元素之间的适当间距。

因此，网站定制的一个重要方面涉及使用CSS填充来给出各种网站元素呼吸空间。

超文本标记语言(HTML)是用于在页面上定义元素的编码语言。CSS可以完全控制元素风格的各个方面，在这种情况下，填充。他们都有助于网站的外观和功能。

就CSS而言，您可以在元素的每一侧设置填充 - 顶部，右下角，左侧，左侧 - 使用长度或百分比。这些值均为正，从零开始，从那里增加。CSS中的Padding属性是不可能的负值。

所有填充属性的默认值为0，这意味着可以使用CSS更改的任何元素，从无额外的间隔。为了在元素中添加空间，您将想要添加填充。

以下是元素的每一侧指定了填充属性：

• padding-top(数量):;
• 填充右：[金额];
• padding-bottom(数量):;
• 填充 - 左：[金额];

间距值 - 即您想要添加多少填充 - 可以采用三种不同的形式：

• 长度在px，pt，cm等中
• 百分比（％）。
• 继承- 这指定应从父元素继承CSS Padding属性。

以下是CSS框模型的可视化解释：

在这里是用于参考的各种填充属性的图：

CSS填充速记

与大多数需要经常重复的CSS属性一样，有一个速记方法用于应用CSS填充。

long-form方法包括在元素的每一侧分别应用填充:

• 填充顶部
• 填充 - 右侧
• 填充底部
• 填充填充

换句话说，定义长形CSS填充意味着a很多额外的代码行会使你的站点膨胀，导致它随着时间的推移变得更慢。

这个长格式的系统可以完成任务，但它对站点的性能不是很有效。如果你的网站上有很多元素，简写版本可以节省相当多的时间。速记使您能够在一行代码中定义填充的一个、几个或所有方面。

这是速记CSS填充的工作原理：

在您只提供一个填充值的情况下，假设元素的所有四个边应在该值填充，例如：

填充:10 px;

如果你提供两个填充值，第一个被理解为顶部和底部填充，第二个被理解为左右填充，例如:

填充:2 px 4 px;

如果你提供三个值，第一个值对应顶部填充，第二个值对应左填充和右填充，第三个值对应底部填充，例如:

填充:15px 10px 15px;

最后，如果有四个值，它们依次表示顶部、右侧、底部和左侧填充:

填充：15px 10px 15px 10px;

虽然长形方法似乎更容易回忆，但它非常简单，它有助于了解速记版的定向相关性。具体地，当您定义四个值时，它们根据它们以CSS编写的顺序顺时针匹配元素的顶部。

CSS文本填充

如果没有适当的空格，就很难阅读大块的文本。事实上，它是如此的压倒性，以至于它可能会让一些人离开他们正在浏览的网站。

文本填充添加了有助于积极阅读体验的文本之间的空间。做得很好，文本填充几乎没有明显，这是理想的 - 您希望您的访问者专注于您的内容和呼叫行动，不是文本元素之间的空间。

使用文本填充，您可以设置元素左右两边的值，或者如果您希望文本元素的所有边都是统一的，则使用一个填充值。

p {
边框:3px solid #00A4BD;
文字对齐：中心;
填充：35px;
｝

按钮填充CS

按钮通常是用于呼叫动作的元素，所以适当地填充它们使它们脱颖而出，只需单击“用户”。与您将填充添加到文本元素的方式类似，可以为按钮完成相同的过程。

.Padded {
颜色:# 2 d3e50;
边框：2px实体＃00a4bd;
填充:5 px 20 px;
｝
。不是 {
颜色:# 2 d3e50;
边框：2px实体＃00a4bd;
｝

CSS图像填充

您可以添加填充以在图像，文本和其他内容之间创建空格，这有助于防止您的网站看起来杂乱。

没有适量填充的图像将看起来像这样：

我们可以假设图像周围的填充保持默认设置为0。

正如您所看到的，页面在图像周围添加填充时，页面看起来明显更小。它为这些元素创造了足够的空间，看起来很舒服，而不是在页面上杂乱无章。

要将CSS填充添加到所有图像，请在您的网站风格表中定位图像元素 -IMG.．然后，添加您所需的填充值。在下面的代码示例中，我们将将填充设置为20px。

img {
填充：20px;
｝

填充颜色的CSS

要将颜色添加到CSS填充，可以使用背景剪辑财产和盒子影像。

Background-clip财产

background-clip函数允许定义背景扩展到元素中的程度。

可以设置颜色，使背景延伸到边框的外边缘。

＃example1 {
边框：3px虚线＃00a4bd;
填充：15px;
背景:# EAF0F6;
背景剪辑：边框盒;
｝

您还可以将颜色设置为在边界的内部停止。

＃xample2 {
边框：3px虚线＃00a4bd;
填充：15px;
背景:# EAF0F6;
background-clip: padding-box;
｝

另一种选择是在背景和边框之间创建空白区域，如下所示。

＃xample3 {
边框：3px虚线＃00a4bd;
填充：15px;
背景:# EAF0F6;
背景剪辑：内容框;
｝

前三个0定义了h-阴影(水平阴影)、v-阴影(垂直阴影)和模糊。要使属性生效，每个项必须有一个值—即使这个值是零．

最后一个值 - 15px - 是稳定阴影的值，它向内延伸以满足内容框。阴影的值必须与填充相同。

＃xample4 {
边框：3px虚线＃00a4bd;
填充：15px;
背景:# EAF0F6;
背景剪辑：内容框;
box-shadow: inset 0 0 0 15px #FF7A59;
｝

您可以使用线性梯度属性对Box-Shady属性进行类似的效果。可以分别设置两个线性梯度值，分别为背景，定义内容框和填充框。

＃xample5 {
边框：3px虚线＃00a4bd;
填充：15px;
padding-box background-clip:内容框;
背景图像:线性渐变(#FFFFFF， #F5C26B)，线性渐变(#FEC3B4， #FF8C6F， #FF7A59);
｝

CSS负填充

负数在指定CSS填充时不起作用，因为它们违背了CSS在这方面的目的。在纺织工业中，“填充物”指的是填充在材料内部的衬里或填充物。这与CSS填充属性的情况相同。

在默认填充为0时，内容的边缘与边框的边缘相同。

p {
边框:3px solid #00A4BD;
背景颜色：＃eaf0f6;
填充：0;
｝

结果元素在浏览器中是这样显示的:

如果可以将填充设置为负数，则内容将与边框重叠。假设有可能使用负值，您会写这样的东西：

。例子 {
填充：-20px 0 0 0;
边框:3px solid #00A4BD;
｝

结果元素在浏览器中是这样显示的:

在你的网站元素周围应用CSS填充

不要低估填充网站上的文本和图像元素的重要性。即使是最小的变化也可以显着提高您的网站的审美和用户体验。但是，通过了解CSS，您将能够确保您的网站将正如您想要的方式查看和功能。

编者注：这篇文章最初发布于2020年2月，并已更新全面。