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

Ответ 1

Вы видите пространство для descenders (бит, который висит внизу "y" и "p" ), потому что img является встроенным элементом по умолчанию. Это устраняет пробел:

.youtube-thumb img { display: block; }

Ответ 2

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

img{vertical-align:text-bottom}

Или вы можете использовать следующее, как предлагает Стюарт:

img{vertical-align:bottom}

Ответ 3

Если вы хотите сохранить изображение как встроенное, вы можете поместить на него vertical-align: top или vertical-align: bottom. По умолчанию он выровнен по базовой линии, следовательно, несколько пикселей под ним.

Ответ 4

Я установил JSFiddle, чтобы протестировать несколько различных решений этой проблемы. Исходя из [расплывчатых] критериев

1) Максимальная гибкость

2) Нет странного поведения

Принятый здесь ответ

img { display: block; }

который рекомендуется многим людям (например, в этой превосходной статье), на самом деле занимает четвертое место.

1-е, 2-е и 3-е место - все эти три решения:

1) Решение, данное @Dave Kok и @Hasan Gursoy:

img { vertical-align: top; } /* or bottom */

<Ь > плюсы:

• Все отображаемые значения работают как с родительским, так и с img.
• Не очень странное поведение; любые братья и сестры img падают, где вы ожидаете их.
• Очень эффективный.

минусы:

• В [совершенно правильном] случае как родительского, так и img, имеющего `display: inline`, значение этого свойства может определять позицию родителя img (немного странно).

2) Установка font-size: 0; в родительском элементе:

.parent {
    font-size: 0;
    vertical-align: top;
}
.parent > * {
    font-size: 16px;
    vertical-align: top;
}

Поскольку для этого <вид > требуется vertical-align: top для img, это в основном расширение 1-го решения.

<Ь > плюсы:

• Все отображаемые значения работают как с родительским, так и с img.
• Не очень странное поведение; любые братья и сестры img падают, где вы ожидаете их.
• Исправлена ​​проблема встроенного пробела для любых братьев и сестер из img.
• Хотя это все еще перемещает позицию родителя в случае родительского и img, имеющих "display: inline", по крайней мере, вы больше не можете видеть родителя.

минусы:

• Менее эффективный код.
• Это предполагает "правильную" разметку; если img имеет текст node siblings, они не будут отображаться.

3) Установка line-height: 0 в родительском элементе:

.parent {
    line-height: 0;
    vertical-align: top;
}
.parent > * {
    line-height: 1.15;
    vertical-align: top;
}

Подобно 2-му решению в этом, чтобы сделать его полностью гибким, он в основном становится расширением 1-го.

<Ь > плюсы:

• Ведет себя как первые два решения во всех комбинациях отображения, за исключением случаев, когда родительский и img имеют `display: inline`.

минусы:

• Менее эффективный код.
• В случае как родительского, так и img, имеющего `display: inline`, мы получаем все виды сумасшедших. (Возможно, игра с использованием свойства `line-height` не самая лучшая идея...)

Итак, у вас это есть. Надеюсь, это поможет какой-то бедной душе.

Ответ 5

Я нашел этот вопрос, и ни одно из решений здесь не работало для меня. Я нашел другое решение, которое избавилось от пробелов ниже изображений в Chrome. Мне пришлось добавить line-height:0; в селектор img в моем CSS, а пробелы ниже изображений исчезли.

Сумасшедший, что эта проблема сохраняется в браузерах в 2013 году.

Ответ 6

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

img { vertical-align: top }

Ответ 7

.youtube-thumb img {display:block;} or .youtube-thumb img {float:left;}

Ответ 8

Дайте высоте div .youtube-thumb высоту изображения. Это должно установить проблему в браузере Firefox.

.youtube-thumb{ height: 106px }

Ответ 9

Как указано ранее, изображение рассматривается как текст, поэтому нижняя часть должна соответствовать тем, что надоедливо: "p, q, y, g, j"; самым простым решением является назначение отображения img: block; в вашем css.

Но это блокирует стандартное поведение изображения, протекающего с текстом. Чтобы сохранить это поведение и устранить пространство. Я рекомендую обернуть изображение чем-то вроде этого.

<style>
    .imageHolder
    {
        display: inline-block;
    }
    img.noSpace
    {
        display: block;
    }
</style>
<div class="imageHolder"><img src="myimg.png" class="noSpace"/></div>