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