How to Apply CSS Padding Around Your Website's Elements

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

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

You canuse CSS to add animations to your site,解决界面挑战，以其他方式使您的访客感到高兴。建立出色的用户体验并不总是如此迷人，但是网页设计的每个方面都很重要 - 即使是元素之间的适当间距似乎并不重要。

Thus, an important aspect of website customization involves using CSS padding to give various website elements room to breathe.

超文本标记语言（HTML）是用于定义页面上元素的编码语言。CSS可以使您完全控制元素样式的各个方面，在这种情况下为填充。他们都为网站的外观和功能做出了贡献。

就CSS而言，您可以使用长度或百分比设置元素的每一侧（顶部，右，底部，左）的填充物。这些值都是正面的，从零开始，从那里增加。CSS中的填充属性不可能。

The default value of all padding properties is 0, which means that any elements that can be changed with CSS start with no extra spacing. In order for space to be added within an element, you’ll want to add padding.

这是针对元素的每一侧指定填充属性的方式：

• 填充：[量]；
• 填充右：[量]；
• 填充底：[量]；
• 左衬里: [amount];

Spacing values — that is, how much padding you want to add — can take on three different forms:

• 长度在PX，PT，CM，等。
• 百分比（％）。
• Inherit- 这指定CSS填充属性应从父元素继承。

Here's a visual explanation of the CSS box model:

这是各种填充属性的图表：

CSS Padding Shorthand

Like most CSS properties that need to be repeated often, there is ashorthand method用于应用CSS填充。

长格式的方法涉及单独将填充物应用于元素的每一侧：

• padding-top
• 填充权
• padding-bottom
• 左衬里

换句话说，定义长格式CSS填充意味着很多额外的代码线可能会膨胀您的网站，从而导致它随着时间的流逝而变得越慢。

这个长格式的系统可以完成工作，但对于您的网站的性能并不有效。如果您在网站上有很多元素，则速记版可以节省大量时间。速记使您能够仅在一行代码中定义一个，几个或所有方面。

Here's how shorthand CSS padding works:

在您仅提供一个填充值的情况下，假定该元素的所有四个侧面都应以该值填充，例如：

填充：10px;

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

填充：2PX 4PX;

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

填充：15px 10px 15px;

最后，如果存在四个值，则它们以上，右，底部和左填充的顺序表示：

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

While the long-form method might seem easier to recall, because it's so straightforward, it helps to understand the directional relevance of the shorthand version. Specifically, when you're defining four values, they match up with the top of an element then clockwise, according to the order in which they're written in CSS.

文本填充CSS

很难在没有体面的间距的情况下阅读大量文本。实际上，它是如此的压倒性，以至于可能会使某人离开他们正在浏览的网站。

文本填充在文本线之间增加了空间，从而有助于积极阅读体验。做得好，文本填充几乎不明显，这是理想的 - 您希望访问者专注于您的内容和calls-to-action, not the space between text elements.

使用文本填充，您将设置元素左右两侧的值，如果您希望文本元素的所有侧面都均匀。

p {
边界：3PX实心＃00A4BD;
文本合格：中心；
填充：35px;
}

按钮填充CSS

按钮通常是用于行动的元素，因此适当地填充它们使它们脱颖而出，足以使用户单击。与您将填充物添加到文本元素的方式类似，可以为按钮完成相同的过程。

.padded {
颜色：＃2D3E50;
边界：2PX实心＃00A4BD;
填充：5px 20px;
}
。not {
颜色：＃2D3E50;
边界：2PX实心＃00A4BD;
}

图像填充CSS

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

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

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

As you can see below, the page looks significantly less compact when padding is added around the image. It creates enough space for the elements to look comfortable, not cluttered, on the page.

To add CSS padding to all images, locate the image element in your website's style sheet —img。然后，添加您所需的填充价值。在下面的代码示例中，我们将填充设置为20px。

img {
padding: 20px;
}

填充颜​​色CSS

To add color to CSS padding, you can use thebackground-clip财产和盒子阴影属性。

背景折叠属性

背景clip函数允许您定义背景延伸到元素多远。

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

＃example1 {
border: 3px dashed #00A4BD;
padding: 15px;
背景：＃eaf0f6;
background-clip: border-box;
}

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

＃example2 {
border: 3px dashed #00A4BD;
padding: 15px;
背景：＃eaf0f6;
背景纸条：填充盒；
}

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

＃example3 {
border: 3px dashed #00A4BD;
padding: 15px;
背景：＃eaf0f6;
background-clip: content-box;
}

前三个零定义了H-shadow（水平阴影），V-Shadow（垂直阴影）和Blur。要使财产运行，这些项目中的每一个都必须具有一个值 - 即使该值为零。

The last value — 15px — is the value for the solid shadow, which extends inward to meet the content box. The value of the shadow must be the same as the padding.

#example4 {
border: 3px dashed #00A4BD;
padding: 15px;
背景：＃eaf0f6;
background-clip: content-box;
盒子阴影：插图0 0 0 15px＃ff7a59;
}

您可以使用线性梯度属性实现与BoxShadow属性相似的效果。可以为背景设置两个线性梯度值，分别定义Content-Box和Padding-Box。

#example5 {
border: 3px dashed #00A4BD;
padding: 15px;
背景折叠：content-box，padding-box;
背景图像：线性级别（#FFFFFF，＃F5C26B），线性级别（＃FEC3B4，＃FF8C6F，＃FF7A59）;
}

CSS Negative Padding

负数在指定CSS填充时无效，因为它们违反了CSS的这一目的。在纺织行业中，“填充”一词是指塞在材料中的衬里或填充。对于CSS填充属性，这是相同的情况。

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

p {
边界：3PX实心＃00A4BD;
背景色：＃eaf0f6;
填充：0;
}

这就是结果元素在浏览器中出现的方式：

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

.example {
填充：-20px 0 0 0;
边界：3PX实心＃00A4BD;
}

这就是结果元素在浏览器中出现的方式：

在网站的元素上应用CSS填充

不要低估网站上文本和图像元素的填充的重要性。即使是最小的变化也可以显着改善您的网站的美学和用户体验。但是，有了对CSS的深刻了解，您将能够确保您的网站能够按照所需的方式准确地外观和功能。

Editor's note: This post was originally published in February 2020 and has been updated for comprehensiveness.