html – 为什么此代码中的图像下方有空格?

html – 为什么此代码中的图像下方有空格?,第1张

概述参见英文答案 > White space at bottom of anchor tag                                    2个 >             Remove white space below image                                     9个 我有以下代码,它允许红色从一个元素显示.为什么是这样.我原以为a元 参见英文答案 > White space at bottom of anchor tag                                    2个
>             Remove white space below image                                     9个
我有以下代码,它允许红色从一个元素显示.为什么是这样.我原以为a元素只会扩展到内容的大小,但它看起来比它大一点.请参阅此处的codepen http://codepen.io/anon/pen/soqEz.

HTML

<a href="#"><img src="http://placehold.it/150x150" /></a>

CSS

a{  background: red;  margin-bottom:0;  padding-bottom:0;  border-bottom:0;}img {  margin-bottom:0;  padding-bottom:0;  border-bottom:0;}

编辑:我看到下面的答案……但任何人都可以解释为什么空间在那里(我的意思是它是一个块级元素……首先是它的目的是什么)…相反试图摆脱它.谢谢

解决方法 默认情况下,img元素是内联的.内联元素充当文本,默认为vertical-align:baseline.这意味着图像的底部与文本的底部对齐.请注意,小写的p或g位于垂直文本对齐的底部之下.您可以通过添加vertical-align:bottom OR display:block来修复它. 总结

以上是内存溢出为你收集整理的html – 为什么此代码中的图像下方空格?全部内容,希望文章能够帮你解决html – 为什么此代码中的图像下方有空格?所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1048401.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-25
下一篇 2022-05-25

发表评论

登录后才能评论

评论列表(0条)

保存