我一直认为css边缘背后的基础理论非常简单.边距为10px的div将围绕该元素创建10px缓冲.当两个div并排放置时,两个div都有10px的余量,导致div间隔20px; 两个元素的边距均为10px,因此元素之间的距离为20px.这似乎是正确的,这是我一直认为的事实.
但是,我最近发现,如果不是将两个div并排放置,而是将一个放在另一个之下,那么两个元素之间的边距现在只有10px.其他div给出的10px保证金发生了什么变化？为什么并排和垂直堆叠之间没有一致性？
边距基本上是"不要把任何东西放在我的x像素内".通过"任何东西",这是否包括其他元素的边缘？在并排的情况下,答案似乎是肯定的,边缘表示"不要在我的x像素内放置任何东西,包括你自己的边距".在纵向的情况下,似乎允许后者？
请有人澄清,以便我可以把它放到床上继续我的晚上:)
它与它们何时inline或inline-block改变它们的属性有关，以便它们彼此相邻堆叠而不会将边距折叠在一起（这是正常但不直观的行为）。
当边距处于默认display:block属性时，边距会崩溃。您可以使用它们来使它们按照您的预期运行，但是您必须使用包含元素的宽度或宽度来inline-block手动控制换行符。br
或者您可以使用填充代替边距。