css 为什么在我的元素下会出现4px的额外填充< a>?

uxh89sit  于 2022-11-27  发布在  其他
关注(0)|答案(4)|浏览(125)

H3LLO,
由于某种原因,在a元素下出现了4px的额外填充。我在Firefox和Chrome中都看到了这种情况。我记得在Flickr早期看到过这种现象,除了它是一个蓝色的条,出现在元素包裹的s下。
这里有一个link to the example code来说明我的问题。背景:的a已被标为红色,并且边框:的img已被着色为灰色。如您所见,a元素在img下方延伸了约4px。
要查看代码,只需点击“Edit using JSBIN”链接,当您将鼠标悬停在窗口上方时,该链接会出现在右上角。
关于如何去除a元素的额外底部填充,有什么想法吗?
谢谢
阿当

72qzrwbm

72qzrwbm1#

vertical-align:bottom;添加到img css属性中。

avwztpqn

avwztpqn2#

a {display: inline-block}
img {display: block}

默认情况下,图像是内联渲染的,您需要添加display: blockvertical-align: bottom来解决此问题。

x6492ojm

x6492ojm3#

对我来说唯一有效的方法是“删除”边距,即用div包裹图像,并将div的大小设置为与图像完全相同。

<div style="width:64px; height:64px">
  <img src ='image.png' style="width:64px; height:64px" />
</div>
bq8i3lrv

bq8i3lrv4#

我不确定为什么会发生这种情况,但是您可以尝试使用YUI Reset来修复它。

相关问题