Question

所以我有这个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的边距占据了可以填充跨度的空间。这是对的吗？

Answer 1

如果您希望跨度占据该空间，请考虑使用浮动来并排获取两个元素。

如果你想保留这个边距，你可以修改绝对/固定的位置属性并将它放在那个空间中，但浮动解决方案会更清晰。

Answer 2

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

CSS：图像上的边距留下了空白空间

2 个答案: