为什么a标签中使用img后的高度多了几个像素?
来源:互联网 发布:听书软件平果版 编辑:程序博客网 时间:2024/05/22 17:47
代码如下:
<!--顶部广告-->
<div class="top_ad"><a href="javascript:;" class="close_ad">关闭</a>
<a href="http://shop.hisense.com/special_activity_page/shuang1111yushou.html">
<img src="img/top_ad.jpg"/>
</a>
</div>
css部分:
/*顶部广告*/
.top_ad{
width: 100%;
position: relative;
}
.close_ad{
position: absolute;
right: 10px;
top: 10px;
padding: 3px 7px;
background: #000;
color: #fff;
font-size: 14px;
}
.top_ad img{
width: 100%;
/*display: block;*/
}
重置样式代码省略。未加入css样式红色部分时,div的高度比img的高度搞几个像素。如何解决,为什么会有这种现象发生?所以就百度了一下,得到以下结果!
a元素下有一个匿名文本,这个文本外有一个匿名行级盒子,它有的默认vertical-align是baseline的,而且往往因为上文line-height的影响,使它有个line-height,从而使其有了高度,因为baseline对齐的原因,这个匿名盒子就会下沉,往下撑开一些距离,所以把a撑高了。
解决办法一是消除掉匿名盒子的高度,也就是给a设置line-height:0或font-size:0;
解决办法二是给两者vertical-align:top,让其top对齐,而不是baseline对齐
解决办法三是给img以display:block,让它和匿名行级盒子不在一个布局上下文中,也就不存在行级盒的对齐问题
解决办法一是消除掉匿名盒子的高度,也就是给a设置line-height:0或font-size:0;
解决办法二是给两者vertical-align:top,让其top对齐,而不是baseline对齐
解决办法三是给img以display:block,让它和匿名行级盒子不在一个布局上下文中,也就不存在行级盒的对齐问题
作者:大地Dudy
链接:https://www.zhihu.com/question/26821863/answer/65552730
来源:知乎
著作权归作者所有,转载请联系作者获得授权。
0 0
- 为什么a标签中使用img后的高度多了几个像素?(转)
- 为什么a标签中使用img后的高度多了几个像素?
- 为什么a标签中使用img后的高度多了几个像素?(转)
- a标签中使用img后的高度多了几个像素
- a标签中使用img后的高度多了几个像素 解决办法
- div中img图片下方空白问题,div高度不等于img图片的高度,会留出几个像素
- 关于div中放入一个img元素导致div高度会多出几个像素的解决问题
- 解决 div或者a标签的高度比里面的img高度多了5px 问题
- 解决 div或者a标签的高度比里面的img高度多了5px 问题
- 解决 div或者a标签的高度比里面的img高度多了5px 问题
- 解决 div或者a标签的高度比里面的img高度多了5px 问题
- IMG标签外增加A标签后,A标签高度增加解决方案
- img标签 在IE6和IE7中导致父层DIV高度多了4px
- 为什么img标签高度显示不正常?
- 获取img对象的高度宽度像素
- 图片标签img中,为什么使用alt属性没用
- 解决 div或者a标签的高度比里面的img高度高问题
- a是父元素,img是子元素,a标签底部总是多几px的高度
- JAVA SSH ----Struts自定义类型转换器
- IPTV质量提升
- ImageLoader进行图片缓存和加载
- 拼单词(队内胡策)
- httpURLConnection发送http请求
- 为什么a标签中使用img后的高度多了几个像素?
- Python之邮件发送
- 一篇文章看懂Android学习最佳路线
- android 移植 ffmpeg (一)
- IOS的基本控件的使用-UIWindow对象
- poj 2785 4 Values whose Sum is 0(二分)
- vs2008 web创作组件安装失败
- zabbix 默认item采集使用被动模式 需要改为主动模式
- easyui datagrid combobox通过url获取json数据的下拉框