如何应用CSS填充你的网站元素

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

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

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

因此，网站定制的一个重要方面就是使用CSS填充来给各种网站元素提供空间。

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

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

所有padding属性的默认值是0，这意味着任何可以通过CSS更改的元素都没有额外的空格。为了在元素中添加空间，您需要添加填充。

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

• 填充 - 顶部：[金额];
• 填充右：[金额];
• 填充底部：[金额];
• padding-left(数量):;

间距值——也就是你想要添加多少padding——可以有三种不同的形式:

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

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

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

CSS填充速记

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

长形方法涉及单独地将填充物施加到元素的每一侧：

• padding-top
• 填充 - 右侧
• padding-bottom
• 填充填充

换句话说，定义长形CSS填充意味着a很多额外的代码行为，可以膨胀您的网站，导致它随着时间的推移变慢。

这种长表单系统完成了完成的工作，但它对您的网站的性能并不有效。如果您的网站上有很多元素，则速记版本可以节省相当多的时间。速记使您能够在仅单行代码中定义一个，几个或多个填充的各个方面。

以下是如何简写的CSS填充工作:

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

填充：10px;

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

填充：2px 4px;

如果提供三个值，则第一个值对应于顶部填充，第二个值适用于左侧和右填充，第三个值是指底部填充，例如：

填充：15px 10px 15px;

最后，如果存在四个值，它们是表示，按顺序，顶部，右，底部和左填充：

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

虽然长形式的方法似乎更容易回忆起来，因为它非常直接，但它有助于理解速记版本的方向相关性。具体地说，当您定义四个值时，它们会根据它们在CSS中编写的顺序与元素的顶部顺时针匹配。

文本填充CSS.

很难阅读没有体面间距的大块文字块。事实上，它如此压倒性，它可能让某人离开网站他们浏览。

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

使用文本填充，如果您希望文本元素的所有边均匀，您将设置元素的右侧和左侧的值或使用一个填充值。

p {
边框：3px实体＃00a4bd;
文字对齐：中心;
填充：35px;
}

按钮填充CS

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

.Padded {
颜色：＃2d3e50;
边框：2px实体＃00a4bd;
填充：5px 20px;
}
另{
颜色：＃2d3e50;
边框：2px实体＃00a4bd;
}

图像填充CS

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

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

我们可以假设图像周围的填充留在0的默认设置。

如下所示，当在图像周围添加填充时，页面看起来明显不那么紧凑。它为页面上的元素创造了足够的空间，使它们看起来舒适而不杂乱。

要为所有图像添加CSS填充，请在网站的样式表-中找到图像元素img。然后，添加您所需的填充值。在下面的代码示例中，我们将将填充设置为20px。

img {
填充:20 px;
}

填充彩色CS

为CSS填充添加颜色，可以使用background-clip财产和盒子影像。

背景剪辑属性

背景剪辑功能允许您定义背景延伸到元素的速度。

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

＃example1 {
边框:3px虚线#00A4BD;
填充:15 px;
背景：＃eaf0f6;
background-clip: border-box;
}

您还可以设置要在边框内侧停止的颜色。

＃xample2 {
边框:3px虚线#00A4BD;
填充:15 px;
背景：＃eaf0f6;
背景剪辑：填充盒;
}

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

＃xample3 {
边框:3px虚线#00A4BD;
填充:15 px;
背景：＃eaf0f6;
background-clip:内容框;
}

前三个零界定了H阴影（水平阴影），V阴影（垂直阴影）和模糊。对于工作的财产，这些项目中的每一个都必须具有值 - 即使该值是零。

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

# example4 {
边框:3px虚线#00A4BD;
填充:15 px;
背景：＃eaf0f6;
background-clip:内容框;
盒子阴影：插入0 0 0 15px＃ff7a59;
}

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

# example5 {
边框:3px虚线#00A4BD;
填充:15 px;
背景 - 剪辑：内容框，填充盒;
背景图像：线性渐变（#ffffff，＃f5c26b），线性梯度（＃fec3b4，＃ff8c6f，＃ff7a59）;
}

CSS -填充

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

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

p {
边框：3px实体＃00a4bd;
背景颜色：＃eaf0f6;
填充：0;
}

这就是生成的元素将出现在浏览器中的结果：

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

。例子 {
填充：-20px 0 0 0;
边框：3px实体＃00a4bd;
}

这就是浏览器中所产生的元素将出现的结果：

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

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

编者按:这篇文章最初发表于2020年2月，现已全面更新。