如何使内部img的margin-bottom和外部div的margin-bottom折叠？

Posted 2023-03-06

【中文标题】如何使内部img的margin-bottom和外部div的margin-bottom折叠？

【英文标题】：how to make margin-bottom of inner img and margin-bottom of outer div collapse?

【发布时间】：2013-04-12 23:12:33

【问题描述】：

我在 div 中有一个 img。 img 向右浮动，文本应从左侧和（如果是长文本）从底部围绕它，如下所示：

文字文字：IMG 文字文字：IMG 文本文本:::: 文本 文本 tex ::::::::::::::

冒号应该代表空格（边距）。

如果是长文本，一切正常。但是如果文本太短而不能超过img的高度，结果是这样的：

文字文字：IMG 文字文字：IMG :::: ::::::::::::::

但应该是这样的：

文字文字：IMG 文字文字：IMG ::::::::::::::

那么，如何让内部 img 的 margin-bottom 和外部 div 的 margin-bottom 折叠？

假设由于内外关系或两个边距都是底边距而导致边距折叠不起作用？

可能相关：我使用 box-sizing:border-box

谢谢

代码

html：

<div>
    <img src="image.png"  />
    Some text
</div>

CSS：

div 
    margin-bottom: 10px;


div img 
    float:right;
    margin: 0 0 10px 10px;

---

编辑

我的解决方法：

HTML

<div>
    <img src="image.png"  />
    <div>
        Some text
    </div>
</div>

CSS

div 



div img 
    float:right;
    margin: 0 0 10px 10px;


div div 
    margin-bottom: 10px;

【参考方案1】：

问题是 div 元素显示为内联；你需要段落和图像是一个块， 所以你应该使用 display:inline-block，像这样：

div 
margin-bottom: 10px;
display:inline-block;


div img 
    float:right;
    margin: 0 0 10px 10px;

你可以看到结果here

【讨论】：

感谢您的回答，但不幸的是它似乎不起作用。两个边距边框不会折叠 - 用填充替换边距（它应该双向工作，可见输出相同）并为 div 和图像提供不同的背景颜色。