CSS：图像上的边距留有空白答案

【问题标题】：CSS: Margin on image leaves an empty spaceCSS：图像上的边距留有空白
【发布时间】：2016-01-24 07:28:51
【问题描述】：

所以我有这个 HTML：

<div id="red_box">

<img id="myImage" alt="Fechar caixa de texto" src="http://quindigo.eti.br/Imagens/IconePequenoQuindigo.png">

<span id="spanOfTheBox">the Text </span>

</div>

还有这个 CSS：

#red_box{
    width:40%;
    background-color:white;
    color:black;
    border:5px double red;
    display:inline-block;
    margin-top:50px;
}

#myImage{
    margin-left:102%;
    display:inline-block;
}

#spanOfTheBox{
    display : inline-block;
    width : 100%;                  
    height : inherit;
}

正如您在fiddle 中所见，span 元素仍位于img 元素下方。似乎应用于 img 的 margin-left 占据了可以填充跨度的空间。这是正确的吗？

【问题讨论】：

是的，没错。你想要一些解决方案吗？
拜托，这将是令人愉快的
一种解决方案：jsfiddle.net/1anc7rgy/4
做这件事的方式多么奇怪......你想达到什么目的？您希望 img 始终悬停在顶部的框外吗？使用position: absolute。
@Rudie 太棒了！有效！问问自己为什么 position:relative 没有。

标签： javascript html css margin

【解决方案1】：

如果您希望跨度占据该空间，请考虑使用浮点数将两个元素并排放置。

如果你想保持这个margin-left，你可以将位置属性修改为absolute/fixed并将它也放置在那个空间中，但是浮动解决方案会更干净。

【讨论】：

【解决方案2】：

是的，边距占用空间。删除它/减少它，它应该可以解决。

【讨论】：

好的，但我需要那个图像。我怎样才能实现它？
正如其他人所说，您可以使用浮动定位，然后使用少量保证金，例如 10% 进一步定位