<a>标签里面直接嵌套图片,<img>下面出现一小段空白的原因

眉间皱痕 提交于 2021-02-17 04:01:03

今天在写页面时,发现在a标签,里面嵌入<img>底部会出现空白的问题!

请看示例代码:

1 <a style="border: 2px dashed blue">
2     <img src="images/module/zright2.jpg" alt="图片">
3 </a>

请看示例效果图:

现在出现了两个问题,首先a标签,没有因为img的大小而被撑大,然后是a的内部下面出现空白。

1、首先,<a>标签是inline的,框模型是:行内框。行内框没有包含图片的表现,<img>的标签就好像放在一条公路上一样。所以要使img能像放进一个盒子一样,就应该使用块级框:比如:
display:block;
/*或者*/
display:inline-block;
关于框模型!推荐你去看看css的官方http://www.w3.org/TR/CSS2/或者网上很多文章都有!

2、<img>标签为什么会有底下的空白呢?这你要理解所谓的“基线(baseline)”。这是一个英文排版概念。我这里还是引用下知乎人的链接吧!http://www.zhihu.com/question/21558138 讲得很周到!

3、总结这个问题的几种解法:
A、处理基线
a{display:block;}
img{vertical-align:bottom;}
 
B、强行去掉<a>标签的行高
a{display:block;line-height:0px;}
 
C、没有设置行高的时候可以去掉字体大小
a{display:block;font-size:0px;}

文章乃参考、转载其他博客所得,仅供自己学习作笔记使用!!!

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!