CSS中的边框与填充

我试图理解CSS中填充和边框之间的确切关系

可以准确地说，透明颜色的实心边框本质上与相同数量的填充相同，并且可以预期其行为类似——除非它们在同一元素上共存，而不是相互覆盖

换言之，是否存在以下情况：

#Square1{
    padding: 50px;
}

，如果替换为：

#Square1{
    border-style: solid;
    border-width: 50px;
    border-color: transparent;
}

将以任何有意义的方式显示不同的行为，除非同一CSS文件中有类似的内容：

.ClassThatSquare1HappensToHave{
    border-style: solid;
    border-width: 50px;
    border-color: transparent;
}

---

，在这种情况下，您将有效地得到两倍于边框/填充/元素扩展空间量的结果？

它们都属于CSS框模型，但用途不同

在：

填充区域以填充边为边界，扩展内容区域以包括元素的填充。其尺寸是填充框宽度和填充框高度。 （……）

边框区域以边框边缘为边界，扩展填充区域 包括元素的边框。其尺寸为边框框 宽度和边框框高度（…）

如果

框大小

属性设置为

边框框

，则边框区域的 可以使用

宽度

，

最小宽度

，

最大宽度

明确定义大小，

高度

，

最小高度

和

最大高度

属性

---

---

话虽如此，只要你想给内部空间，就应该使用

padding

，并使用

border

给出确切的状态-边框-如果有

padding

将在

padding

区域后显示的一行。

也许这就是你要寻找的。请注意溢出在左侧显示的内容（剪切到填充边缘）和滚动条的位置（位于填充外部，但位于边框内部）中的行为是如何不同的

#Square1{
填充：50px；
}
#平方2{
边框样式：实心；
边框宽度：50px；
边框颜色：透明；
}
身体{
宽度：400px；
}
div{
背景颜色：浅蓝色；
高度：100px；
溢出：自动；
}

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。

如果您需要使用另一种边框样式来#Square1怎么办？是的，我很欣赏边框样式可以用来创建视觉效果，而这种方式是填充所无法实现的。但是，例如，无论边框样式是什么，它与鼠标盖和链接的交互方式都是相同的：使用50px的填充或50px的边框，将鼠标移动到可见元素左侧的35px将显示标题文本，单击此处将使链接起作用-以一种不正确的方式，例如，使用边距或轮廓。我试图找出，像边距和轮廓一样，是否存在非视觉上的差异。我不知道这是如何回答这个问题的，css属性总是以奇怪的方式被用来创建通常不可能的东西，因此，一个用它来解释其含义的答案不是一个解释，而且肯定不会回答op的问题，它将以任何有意义的方式显示不同的行为。填充区域的大小也可以通过填充底部、填充左侧、填充右侧和填充顶部属性明确定义。是的，边框存在于填充和边距之间，而不是内容和边框之间。但当两者都是透明的时，它们在其他方面有什么不同吗？@ooogoman

是的，边框存在于填充和边距之间，而不是内容和边框之间。

为什么边框会存在于内容和内容本身之间<代码>但是它们在其他方面有什么不同吗我想我已经在回答中解释过了。

填充

是创建一个内部间距，

边框

是创建一个边框，一条线，它可以是透明的，给人一种

填充

的错觉，但不是。他们是不同的。如果同时设置这两个属性，您会看到

border

在填充区域外添加了空格。@ZohirSalak我已经解释了属性之间的差异以及这些属性应该在何时正确使用。以奇怪的方式创造（在这种情况下）这不是重点。OP试图理解这些属性之间的差异。是的，但如果目的是创建空间，为什么要使用透明边框而不是填充？这实际上就是答案。如果你不介意的话，我还想补充一个事实，由于背景原点默认为填充框，背景的行为也会有所不同：（让我们把所有的差异都放在一个答案中）Sonuvabitch！就在我认为我有一个好的、简单的答案的时候，在你身上出现了复杂的事实。感谢您和@TemaniAfif@ooogoman还有一个与位置相关的基本区别：绝对：。。。引用是填充框而不是边框框