Дополнительный отступ для связанных изображений (в любом браузере)

Question

У меня проблема с дополнительным заполнением элемента ссылки с изображением внутри.Это происходит во всех браузерах, Safari, Firefox, IE.

У меня есть таблица стилей сброса, поэтому не должно быть никаких дополнительных полей при заполнении, но при осмотре становится ясно, что элемент a имеет дополнительное днопрокладка из ниоткуда.Есть идеи?

Вот разметка и CSS:

<div class="movie"><a href=""><img src="img/video01.jpg" alt="" /></a></div>

div.home-col .movie {
padding: 0 0 11px 0;
background: url(../img/bg-shadow-movie.png) bottom no-repeat;
}

div.home-col .movie a {
display: block;
background: url(../img/bg-zoom-movie.png) 50% 5px no-repeat;
}

div.home-col .movie img {
padding: 4px;
margin: 0;
border: 1px solid #d0d0d0;
}

Answer 1

Попробуйте добавить следующую строку в элемент ссылки: line-height: 0;

div.home-col .movie a {
display: block;
background: url(../img/bg-zoom-movie.png) 50% 5px no-repeat;
line-height: 0;
}

Answer 2

извините за ответ на этот вопрос 3 года спустя, но эта страница находится на первой странице Google, и я чувствую ответственность ..... ответ: только добавьте "вертикальное выравнивание: верх;" к img внутри тега .

Answer 3

Добавление стиля = "padding: 0px;"решил проблему для меня.

Answer 4

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

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

Answer 5

Вы уверены, что это все CSS?Я не вижу проблемы, которую вы описываете на этой тестовой странице: http://www.pauldwaite.co.uk/test-pages/3532870/

Answer 6

Вы пытались добавить заполнение к:

div.home-col .movie a {
display: block;
padding: 0 0 0 0;
background: url(../img/bg-zoom-movie.png) 50% 5px no-repeat;
}

Если нет, то вы можете добавить: посещения, чтобы проверить, не изменилось ли что-либо.

Answer 7

Фоновое изображение для класса фильма будет отображаться в нижней части поля и примененного к нему отступа, поэтому используйте следующее, если вам нужно пространство в 11 пикселей в нижней части изображения.

div.home-col .movie {
margin: 0 0 11px 0;
background: url(../img/bg-shadow-movie.png) bottom no-repeat;
}