Css 如何折叠内联块元素的边距？

作为模块底部边距的整体解决方案，我尝试移除容器模块的底部填充，以便底部间距仅由其内部元素的底部边距确定，如下所示：

.module {
   padding: 20px 20px 1px;
}

.element-1,
p, ul, form { margin-bottom: 25px; }

如果我最后的所有元素（甚至是嵌套的元素）都是块元素（它们的底部边距折叠），那么它就可以工作。但是，如果在嵌套元素中有一个内联块元素，则底部边距不会折叠，因此它在某种程度上等于总底部边距

参见jsFiddle:

---

内联块元素折叠边距的解决方案是什么？

如果给任何元素显示：内联块，它将添加空白或换行符，从而产生间隙。为了克服这个问题，你需要增加负的边际。参考：这不是因为内联元素没有边距吗？如果从类（.cont-3）中删除边距底部：20px，它应该可以工作。为什么需要内联块元素？@BoltClock inline blocks也很适合制作响应网格，但不可折叠的边距使其难以正确布局