链接图片上的额外填充（在每个broswer中） [英] Extra padding on linked images (in every broswer)

问题描述

m有一个问题，在链接元素与内部的图像获得额外的填充。它会发生在所有浏览器，Safari，Firefox，IE。

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

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

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?

以下是标记和CSS：

< div class = movie>< a href =>< img src =img / video01.jpgalt =/>< / 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;
}

推荐答案

尝试将以下行添加到您的连结元素： line-height：0;

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;
}

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