如何解决宽度不固定的容器中边距塌陷失效的问题
在一段 html 代码中，存在一个宽度不固定的灰色容器，其中包含 n 个固定宽高的 div 盒子。这些盒子均设置了右边距和下边距，但希望最下面的两个盒子的下边缘与灰色容器的下边缘对齐。
起初，尝试使用 css 的边距塌陷，但在这种布局中无效。也尝试了给最下面的两个盒子单独设置 margin-bottom: 0，但由于灰色容器宽度不固定，最下层盒子的数量不确定，这种方法不可行。
之所以边距塌陷失效，是因为 margin 合并被破坏了。当使用 inline-block 作为元素的容器时，会禁用 margin 合并。
为了实现预期的布局，可以使用 flex 搭配 gap 属性：
.main { width: 700px; margin: 100px auto; background-color: #efefef;}.d1 { display: flex; flex-wrap: wrap; gap: 50px;}.d2 { width: 100px; height: 100px; border: 1px solid #f00;}
gap 属性可以实现盒子的间距，而 flex-wrap 属性允许盒子换行。
需要注意的是，gap in flex 存在兼容性问题，可以使用 grid 布局来解决。
以上就是宽度不固定的容器中，如何解决边距塌陷失效并实现盒子与容器下边缘对齐？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1631183.html
微信扫一扫 
支付宝扫一扫 
