CSS: Margin на изображение оставляет пустое пространство

Так у меня есть этот HTML:CSS: Margin на изображение оставляет пустое пространство

<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, занимает пространство, которое может быть заполнено белым. Это верно?

источник

2015-10-25 Mr Guliarte

Да, это правильно. Вы хотите какое-то решение? – makshh

Пожалуйста, было бы восхитительно –

Одно решение: https://jsfiddle.net/1anc7rgy/4/ – makshh

Да, маржа занимает пространство. Удалите его/уменьшите, и он должен работать.

источник

2015-10-25 00:14:37

Хорошо, но мне нужно это изображение именно там. Как я могу это достичь? –

Как упоминал другой парень, вы можете использовать поплавки для позиции, а затем использовать небольшую величину поля, например, 10% для дальнейшего позиционирования –

Если вы хотите, чтобы пролет занимал это пространство, подумайте об использовании поплавков, чтобы получить оба элемента бок о бок.

Если вы хотите сохранить эту левую крайность, вы можете изменить атрибут позиции абсолютного/фиксированного и поместить его в это пространство, но решение поплавка будет намного чище.

источник

2015-10-25 00:16:23

CSS: Margin на изображение оставляет пустое пространство

ответ

Смежные вопросы