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

Question

我在 div 中有一个 img。 img 向右浮动，文本应从左侧包围它，并且(如果是长文本)从底部包围它，如下所示:

text text:IMGtext text:IMGtext text::::text text tex:::::::::::::

the colons should represent the space (margin).

if it's a long text, everything's working fine. but if the text is too short to exceed the img's height, the result is sth like that:

text text:IMGtext text:IMG         :::::::::::::::::

but should be sth like this:

text text:IMGtext text:IMG:::::::::::::

so, how do I get the margin-bottom of the inner img and the margin-bottom of the outer div to collapse?

suppose that margin-collapsing doesnt work because of either the inner-outer-relation or because of that both margins are bottom-margins?

maybe relevant: I use box-sizing: border-box

thank you

CODE

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;
}

Answer 1

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

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

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

可以看到结果here