链接图像上的额外填充（在每个浏览器中） [英] Extra padding on linked images (in every browser)

问题描述

我有在链接元素中获取额外填充的问题。它发生在所有的浏览器，Safari浏览器，火狐浏览器，IE浏览器。

我有一个重置样式表应用，所以不应该有任何额外的边距，但经过检查， a 元素有一些额外的底部填充。任何想法？

这是标记和CSS：

< div class = movie>< a href =>< img src =img / video01.jpgalt =/>< / a>< / div>

  div.home-col .movi​​e {
 padding：0 0 11px 0; 
 background：url（../ img / bg-shadow-movie.png）bottom no-repeat; 
} 
 
 div.home-col .movi​​e a {
 display：block; 
 background：url（../ img / bg-zoom-movie.png）50％5px no-repeat; 
} 
 
 div.home-col .movi​​e img {
 padding：4px; 
保证金：0; 
 border：1px solid＃d0d0d0; 
 
  

解决方案

尝试添加以下行您的链接元素： line-height：0;

  div.home-col .movi​​e a { 
 display：block; 
 background：url（../ img / bg-zoom-movie.png）50％5px no-repeat; 
 line-height：0; 
} 
  

I'm having a problem with getting extra padding on link element with an image inside. It happens in all browsers, Safari, Firefox, IE.

I have a reset stylesheet applied so there shouldn't be any extra margins on padding but upon inspection it's clear that the a element has some extra bottom padding from nowhere. Any ideas?

Here's the markup and 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;
}

解决方案

Try adding the following line to your link element: line-height: 0;

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

这篇关于链接图像上的额外填充（在每个浏览器中）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！