HTML 5 странный img всегда добавляет 3px margin внизу

Когда я меняю свой сайт на

<!DOCTYPE HTML>

Каждый элемент img, который обернут внутри DIV, имеет нижнее поле 3px, хотя этот марж не определен в CSS. Другими словами, нет атрибутов стиля, которые вызывают нижнее поле 3px.

<div class="placeholder">
    <img alt="" src="/haha.jpg" />
</div>

Теперь позвольте сказать, что haha.jpg - 50x50, и .placeholder установлен для отображения: table. Странно, что размеры высоты .placeholder в моем наблюдении 50x53...

Кто-нибудь столкнулся с этой аномалией и зафиксировал ее?

ИЗМЕНИТЬ

Вот JS FIDDLE

http://jsfiddle.net/fRpK6/

Ответы

Ответ 1

Эта проблема вызвана тем, что изображение ведет себя как символ текста (и, таким образом, оставляя под ним пробел, где будет висит часть "y" или "g" ) и решается с помощью vertical-align CSS, чтобы указать, что такое пространство не требуется. Будет выполняться почти любое значение vertical-align; Я лично люблю middle.

img {
    vertical-align: middle;
}

jsFiddle: http://jsfiddle.net/fRpK6/1/

Ответ 2

Я часто решаю это, предоставляя соответствующий элемент изображения display:block или display:inline-block.

Ответ 3

решается моя проблема.

line-height: 0;

Ответ 4

Я считаю, что установка

line-height: 1;

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

Ответ 5

Я не уверен в точном объяснении, почему это происходит, но дайте ваш размер заполнителя div font-size: 0px;

.placeholder {
    font-size: 0px;
}

Ответ 6

не уверен, что такое точная проблема, но я попробовал это с помощью двух разных вариантов, сначала примените класс к тегу img, это будет работать, а во втором - размер шрифта 0 px;

http://jsfiddle.net/fRpK6/3/

Ответ 7

Это также происходит с накоплением divs, просто добавьте свойство float. Пример:

<body>
  <div class="piledUpDiv">Some text</div>
  <div class="piledUpDiv">Some text</div>
  <div class="piledUpDiv">Some text</div>
</body>

Проблемный CSS:

.piledUpDiv{
    width:100%;
    display:inline-block;   
 }

Решение:

.piledUpDiv{
    width:100%;
    display:inline-block;
    float:left; 
 }

Ответ 8

применить display: block к исправлению изображения, у меня есть эта проблема с изображениями внутри плавающих div.

Ответ 9

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

img {
display: block;

} или

img {
vertical-align: top/middle/...;

}

или

.placeholder {
font-size: 0;

}

Ответ 10

Для меня это была комбинация

font-size: 0px;
line-height: 0;

на контейнере для упаковки, который его исправил.