Блог

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

 <div>
    <img src="http://placehold.it/100x100" />
    <span>hello</span>
</div>

img{
    padding:20px;
    background: red;
}

span{
    width: 300px;
    background-color: blue;
    display: inline-block;
    vertical-align: top;
    height: 100%;
}
  

Как вы видите в этой скрипте, у меня есть некоторый пробел между красными и синими элементами. И что бы я ни делал, я не могу от этого избавиться. Также я был бы признателен, если бы кто-нибудь мог сказать мне, почему мой height: 100%; не работает для второго элемента (он должен быть той же высоты, что и изображение).

Существует странное заполнение, потому что между <img> и <span> в исходном коде html есть пробел.

 <div>
    <img src="http://placehold.it/100x100" />
    <span>hello</span>
</div>
  

Удаление пробела устранило бы заполнение.

 <div>
    <img src="http://placehold.it/100x100" /><span>hello</span>
</div>
  

Но это, вероятно, не то, что вам нужно (читайте дальше). Согласно вашему второму вопросу, причина, по которой 100% не работает, заключается в том, что <div> не задана высота, и не на чем основывать процентную высоту. <div> Высота здесь является результатом высоты его содержимого. Оно принимает высоту более высокого элемента, чтобы он мог вместить оба.

Итак, что вы на самом деле ищете, это display: table . Размещение изображения и текста рядом очень легко достигается с помощью таблиц.

 div {
    display: table;
}

img {
    display: table-cell;
    padding:20px;
    background: red;
}

span {
    display: table-cell;
    width: 300px;
    background-color: blue;
    vertical-align: top;
    height: 100%;
}
  

Смотрите демонстрацию здесь.

Встроенные элементы чувствительны к пробелам. Просто удалите его:

 <div>
    <img src="http://placehold.it/100x100" /><span>hello</span>
</div>
  

Пример jsFiddle

Или

 <div>
    <img src="http://placehold.it/100x100" /><!--
    --><span>hello</span>
</div>
  

Пример jsFiddle

Другой метод заключается в том, чтобы сделать размер шрифта в элементе контейнера нулевым, а затем сбросить размер для дочерних элементов, но я не рекомендую это.

поскольку ваши html-элементы, которые были оформлены с помощью display:inline-block , физически не соприкасались …. я исправил это: http://jsfiddle.net/jalbertbowdenii/2ZNUT/1 /

добавьте display:block в css вашего изображения.

попробуйте это в скрипке

 img{
    padding:20px;
    background: red;
    display:block;
}

span{
    width: 300px;
    background-color: blue;
    display: inline-block;
    vertical-align: top;
    height: 100%;
}
  

Примените свойство display или свойство float для вашего img. Таким образом, css будет выглядеть:

 img{
padding:20px;
background: red;
display:block;
}
  

Или

 img{
padding:20px;
background: red;
float:left;
}
  

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