Erlo

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

时间:2019-01-12 20:02   阅读:20次   来源:博客园页面报错

点赞 打赏

×打赏

支付宝

微信

今天在写页面时,发现在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;
#zs#或者#fzs#
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;}

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

下一篇:jQuery复习 简单实现购物车功能

评论留言

还没有评论留言,赶紧来抢楼吧~~

Erlo大厅()

* 这里是“Erlo大厅”,在这发言所有人都可以看到。只保留当天信息

  • Erlo.vip2019-01-21 06:30:55Hello、欢迎使用Erlo大厅,这里是个吐槽的地方。
  • 首页 笔记分享 新闻资讯 ERLO 搜索
    鼠标试试
    返回顶部