如何用css设置元素内边距padding

内边距控制内容和边框之间的距离。
说白了，有两种设置：
一是直接使用padding。
值按以下顺序分配：上、右、下、左。
该值在所有方向上都是相同的。
有两个值，一个用于顶部和底部，一个用于左侧，一个用于右侧。
三个值（一个在右边，一个在左边，一个在旁边）。
这四个值分别对应上、下、左、右。

另一个是反汇编设置。
尝试单独更换带衬垫的上衣。
只需更改正确的填充即可。
请单独更换底部衬垫。
更改左侧内边距。

举个例子。
例如，我想要顶部 2 0 像素，右侧 1 5 像素，底部 1 0 像素，左侧 5 像素。
您可以编写自己的填充：2 0px 1 5 px 1 0px 5 px。
用 padding-top:2 0px 分割它；也可以写：rightpadding:1 5 px;底部内边距：1 0px；左内边距：5 px。

如何使用？最重要的是把它留空。
如果内容混在一起，看起来就不好看。
添加内边距以将内容移离边框更远。
例如，div{padding:1 2 px 1 6 px;} 顶部和底部为 1 2 px，左侧和右侧为 1 6 px。

响应式设计可以与媒体查询一起使用。
较小的屏幕需要较少的填充。
例如，@media(max-width:6 00px){div{padding:8 px 1 2 px;}} 在小屏幕上添加小内边距。

注意盒子模型问题。
默认的 box-sizing:content-box, padding 会增加元素的宽度。
要保持宽度不变，请使用 box-sizing:border-box。
在这种情况下，应用填充不会增加宽度。

滚动条有问题。
填充本身不会触发滚动，而是在内容超出容器时发生。
所以不要赋予它太多的价值。

代码应该尽可能简洁。
如果四个方向不同，使用这四个值比单独写要快。
例如，使用 padding:1 0px 2 0px 比分别写入四个值效率更高。

看这个例子。
.box{padding:1 5 px 2 0px;} 顶部和底部各 1 5 px，左右各 2 0px。
.box-custom 是单独创建的，顶部 1 0px，右侧 3 0px，底部 5 px，左侧 1 5 px。
效果是一样的。

一开始是这样的

css怎么设置内边距

页眉距边界怎么设置

2 02 2 年，我在某城市上网页设计培训班，老师正在讲这个。
当时我有点困惑，后来发现其实就这么简单，调整一下表头和边框的距离就可以了。
内边距和边距听起来有点花哨，但它们实际上是元素和边框之间的距离调节器。
让我举个例子。
2 02 2 年，我接手了一个项目。
客户说页眉应该离页面边缘远一些。
我使用 padding 将其设置为顶部和底部 2 0 像素，左侧和右侧 0 像素。
立即将头远离边缘。

然后我想了想，如果header旁边还有其他元素怎么办？然后我就可以使用保证金了。
于是我改了代码，margin: 2 0px 0;现在标题的顶部和底部之间有空间，并且左侧和右侧的其他元素旁边不再尴尬。

然后，我遇到了一个问题。
父标题元素也需要调整，所以我结合了边距和填充。
我在 header 的父元素上设置了 margin，并将 header 本身的 padding 设置为 0，反之亦然，以更有效的为准。
2 02 2 年我会经常使用这个技术，它非常实用。

需要注意的一点是，一定要记得在 HTML 文件中引入 CSS 样式表，这样调整才能生效。
客户需求不断变化，价值必须灵活调整。
当时我有点偏激，觉得这个属性太强大了，几乎可以解决所有的header margin问题。
现在想来，还是需要根据实际情况来确定，不能一味追求复杂。
就这样，不再多言。