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

дополнительное дополнение

У меня возникла проблема с дополнительным отступом в элементе ссылки с изображением внутри. Это происходит во всех браузерах, 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;
}

image html padding css hyperlink
person Justine    schedule 20.08.2010    source источник
comment
Хотел бы увидеть эти изображения, которые вы используете для фоновых изображений CSS. В вашем примере кажется, что вы явно помещаете 11 пикселей в нижнюю часть .movie, поэтому, если ваше теневое изображение не выстраивается в линию, возможно, ваша тень меньше 11 пикселей?   -  person babtek    schedule 22.08.2010

Ответы (7)


arrow_upward
21
arrow_downward

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

div.home-col .movie a {
display: block;
background: url(../img/bg-zoom-movie.png) 50% 5px no-repeat;
line-height: 0;
}
person Ian Yates    schedule 02.11.2010
comment
У меня была та же проблема, и я добавил ее в родительский div, и это сработало, я использую HTML5 Doctype, и эта проблема внезапно начала появляться - person Clarence Liu; 10.03.2012

arrow_upward
11
arrow_downward

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

person user3051858    schedule 29.12.2013
comment
Это хорошо работает. На самом деле «средний» или «нижний» также будет работать как вертикальное выравнивание, если это не «базовая линия». 'baseline' резервирует некоторое пространство под элементом для выносного элемента (например, конец y), который может оказаться нежелательным дополнением. - person jox; 29.12.2014

arrow_upward
0
arrow_downward

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

div.home-col .movie {
margin: 0 0 11px 0;
background: url(../img/bg-shadow-movie.png) bottom no-repeat;
}
person Nick Pyett    schedule 20.08.2010
comment
Это не так. Прокладка находится там, где находится теневая вещь, и она точно такой же высоты, как и теневое изображение, так что проблема не в этом. Дополнительный отступ применяется к элементу a, а не к чему-либо еще. - person Justine; 20.08.2010

arrow_upward
0
arrow_downward

Вы пытались добавить отступы к:

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

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

person Ken    schedule 22.08.2010
comment
Да, я тоже пробовал сбросить заполнение. a:visited тоже не работает. Как ни странно, я помню ту же проблему и из некоторых предыдущих проектов. - person Justine; 23.08.2010

arrow_upward
0
arrow_downward

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

person Paul D. Waite    schedule 02.11.2010

arrow_upward
0
arrow_downward

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

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

person Daniel Del Core    schedule 09.10.2012

arrow_upward
0
arrow_downward

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

person user1270392    schedule 26.03.2013