image - 如何使内部img的margin-bottom和外部div的margin-bottom崩溃？

Question

我在 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" alt="" />
    Some text
</div>

CSS：

div {
    margin-bottom: 10px;
}

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

编辑

我的解决方法：

HTML

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

CSS

div {

}

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

div div {
    margin-bottom: 10px;
}

score 0 · Accepted Answer

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

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

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

1 回答 1