Изображение внутри div имеет дополнительное пространство под изображением

Почему в следующем коде высота div больше высоты img? Между изображением есть пробел, но это не похоже на отступы.

Каков промежуток или дополнительное пространство под изображением?

#wrapper {
  border: 1px solid red;
  width:200px;
}
img {
  width:200px;
}

<div id="wrapper">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

Ответ 1

По умолчанию изображение отображается в строке, как буква.

Он сидит на той же линии, на которой сидят a, b, c и d.

Существует пробел ниже этой строки для descenders вы найдете на буквы, как f, j, p и q.

Вы можете отрегулировать vertical-align изображения, чтобы поместить его в другом месте (например, в middle) или изменить display чтобы оно не было встроенным.

Ответ 2

Другой вариант, предложенный здесь, устанавливает стиль изображения как style="display: block;"

Ответ 3

Быстрое исправление:

Чтобы удалить пробел под изображением, вы можете:

Задайте свойство vertical-align изображения vertical-align: bottom; vertical-align: top; или vertical-align: middle;
Задайте для свойства отображения изображения значение display:block;

Для демонстрации в реальном времени см. следующий код:

#vAlign img {
  vertical-align :bottom;
}
#block img{
  display:block;
}

div {border: 1px solid red;width:100px;}
img {width:100px;}

<p>No fix:</p>
<div><img src="http://i.imgur.com/RECDV24.jpg" /></div>

<p>With vertical-align:bottom; on image:</p>
<div id="vAlign"><img src="http://i.imgur.com/RECDV24.jpg" /></div>

<p>With display:block; on image:</p>
<div id="block"><img src="http://i.imgur.com/RECDV24.jpg" /></div>

Ответ 4

Можно также аннулировать высоту родительской строки:

#wrapper {
  line-height: 0;
}

Все исправления: http://jsfiddle.net/FaPFv/

Ответ 5

Все, что вам нужно сделать, это назначить это свойство:

img {
    display: block;
}

Изображения по умолчанию имеют это свойство:

img {
    display: inline;
}

Ответ 6

Вы можете использовать несколько методов для этой проблемы, например

Использование line-height
```
#wrapper {  line-height: 0px;  }
```

Используя display: flex

#wrapper {  display: flex;         }
#wrapper {  display: inline-flex;  }

Используя display: block, table, flex и inherit

#wrapper img {  display: block;    }
#wrapper img {  display: table;    }
#wrapper img {  display: flex;     }
#wrapper img {  display: inherit;  }

Ответ 7

Я нашел, что он отлично работает с использованием display: block; на изображении и вертикально-выровнять: верх; по тексту.

.imagebox {
    width:200px;
    float:left;
    height:88px;
    position:relative;
    background-color: #999;
}
.container {
    width:600px;
    height:176px;
    background-color: #666;
    position:relative;
    overflow:hidden;
}
.text {
    color: #000;
    font-size: 11px;
    font-family: robotomeduim, sans-serif;
    vertical-align:top;
    
}

.imagebox img{ display:block;}

<div class="container">
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
</div>

Ответ 8

Я использовал line-height:0, и он отлично работает для меня.

Ответ 9

Его можно также зафиксировать, назначив высоту родительскому div img и наследуя высоту для img. Выполните следующие действия:

#wrapper {
    border: 1px solid red;
    width: 200px;
    height: 140px;
}
img {
    width:200px;
    height: inherit;
}

Ответ 10

Добавьте атрибуты CSS в div

#wrapper {
line-height: 0;
}

Ответ 11

Я просто добавил float:left в div, и он работал