开发者社区> 问答> 正文

css布局问题,在firebug下<a>标签嵌入<img>标签但是高度<a>总比<img>多4个像素

demo参考:http://huzerui.com
问题:
Firebug下a标签嵌入img标签,但是高度a标签始终比img标签多4个像素,a不是适应img的高度吗,这个4px怎么来的,可以去除吗?
如图:
screenshot
screenshot
一开始以为是默认样式有问题,添加了

*{
    margin:0;
    padding:0;
}


测试后没有用 然后就删了

<div>
    <a>
        <img>
    </a>
</div>

三个标签都没有高度 ,demo中div和a适应img的高度,定义了img为max-width:100%;

展开
收起
杨冬芳 2016-06-22 16:20:03 2322 0
1 条回答
写回答
取消 提交回答
  • IT从业

    转自:http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

    这是 line-height 和 vertical-align 造成的,被称为幽灵空白节点,解决方案有以下几种:

    •让 vertical-align 失效

    ◦img { display: block; }

    •vertical-align 默认为 baseline,更改为其他即可
    `
    ◦img { vertical-align:middle; }
    `

    •直接修改 line-height 值
    `
    ◦a { line-height: 5px; }

    •修改 font-size

    ◦a { font-size: 0; }

    `

    2019-07-17 19:45:45
    赞同 展开评论 打赏
问答分类:
问答地址:
相关产品:
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载