CSS Padding – 管理元素内部的空间

第 11 讲：css 填充 - 管理元素内的空间

在本次讲座中，我们将讨论css 填充，它控制元素内部元素内容与其边框之间的空间。填充在确定元素的间距和大小、提供干净且可读的布局方面起着至关重要的作用。

1.什么是填充？

padding 定义元素内容与其边框之间的空间。与边距（在元素外部创建空间）不同，填充会在元素本身内部添加空间。

基本语法：

element {
    padding: value;
}

2.设置所有边的内边距

您可以使用 padding 属性在元素的所有四个边上应用相同数量的填充。

示例：

.box {
    padding: 20px; /* adds 20px of padding on all sides */
}

这将在元素内部围绕其内容添加 20 像素的空间。

立即学习“前端免费学习笔记（深入）”；

3.每侧都有单独的衬垫

您还可以使用以下属性设置各个边的填充：

• 顶部填充
• 向右填充
• 填充底部
• 向左填充

示例：

.box {
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 20px;
    padding-left: 25px;
}

这使您可以更好地控制元素每一侧应用的填充量。

4.填充的简写属性

您可以使用 padding 简写属性为每一侧定义不同的填充值，类似于边距的工作方式。它最多接受四个值：

• 如果提供四个值：第一个用于顶部，第二个用于右侧，第三个用于底部，第四个用于左侧。
• 如果提供三个值：第一个用于顶部，第二个用于左/右，第三个用于底部。
• 如果提供两个值：第一个用于顶部/底部，第二个用于左/右。
• 如果提供一个值：它适用于所有方面。

示例：

.box {
    padding: 10px 20px 30px 40px; /* top: 10px, right: 20px, bottom: 30px, left: 40px */
}

5.填充和元素大小

填充量影响元素的整体大小。默认情况下，元素的宽度和高度会添加内边距，这可以使元素显得更大。

示例：

.box {
    width: 300px;
    padding: 20px;
}

在这种情况下，元素的实际宽度将为340px（300px宽度+左右两侧填充20px）。

6.盒子大小：border-box

如果你不希望内边距影响元素的整体宽度和高度，可以使用 box-sizing: border-box 属性。这告诉浏览器在元素的指定宽度和高度内包含填充和边框。

示例：

.box {
    width: 300px;
    padding: 20px;
    box-sizing: border-box;
}

现在，元素将保持 300px 宽，内边距包含在总宽度中。

7.填充百分比

填充值也可以使用百分比来设置，百分比是根据包含元素的宽度计算的。

示例：

.box {
    padding: 10%; /* padding will be 10% of the containing element's width */
}

这使得填充响应容器的大小。

8.填充的视觉效果

使用填充可以通过确保内容周围有足够的空间来显着提高可读性和整体设计，使其更具视觉吸引力且不那么拥挤。

示例：

.text-box {
    border: 1px solid #333;
    padding: 20px;
}

这将创建一个间距良好的文本框，其中的内容有足够的空间在边框内呼吸。

结论

了解如何使用填充来控制元素内部的空间对于构建干净、结构化且具有视觉吸引力的布局至关重要。填充可确保您的内容可读且在其容器内看起来很专业。

在 linkedin 上关注我

里多伊·哈桑