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

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

img{vertical-align:text-bottom}

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

img{vertical-align:bottom}

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

Я создал 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 имеет братьев и сестер текстового узла, они не будут отображаться.

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

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

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

плюсы:

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

плюсы:

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

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

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

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

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

img { vertical-align: top }

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

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

.youtube-thumb{ height: 106px }

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

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

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