a标签中使用img后的高度多了4px
2024-03-16 08:46:48
前两天，在做一个网站的时候，发现a标签中使用img后的高度多了4px，各种纠结。
最后，仔细分析，终于找到原因了，因为img是行内元素，默认display: inline; 它与文本的默认行为类似，下边缘是与基线（baseline）对齐，而不是紧贴容器下边缘。将displayp设置为block即可消除4px的BUG。
既然原因找到了，那么，解决方案肯定不止这一种啦！
如下：
1.将图像定义成block (display:block)
2.给父级设置固定高度，然后overflow:hidden
3.设置font-size:0;
4.设置 img 的 vertical-align: bottom;
5.设置 img 的 margin-bottom: -4px;
就是这样，以后可以根据具体使用场景来确定最优方案了。
最新文章
- TCP服务器连接相关知识点
- 使用Java编写一个简单的Web的监控系统cpu利用率，cpu温度，总内存大小
- 【ZZ】C 语言中的指针和内存泄漏 & 编写高效的C程序与C代码优化
- Android include和merge标签的使用
- 理解 Javascript 的闭包
- HTML静态网页（css样式表）
- js在以div添加滚动条
- NuGet管理
- swift 有道 翻译文档(2 条件语句 循环语句)
- POJ3273-Monthly Expense-二分答案
- new Thread与线程创建
- JMeter (3) —— JMeter录制脚本并压力测试用户登陆场景以CAS SSO为例（101 Tutorial）
- 新手也能学会本地调试微信，natapp 官网映射
- 记录.NET Core部署到Linux之发布项目到Linux(2)
- JAVA学习IO(1)
- 【Asp.net入门16】第一个ASP.NET 应用程序-总结
- apache kafka消息服务
- HDUOJ--点球大战
- 【ichartjs】用ichartjs替代Excel做直方图
- linux内核对中断的处理方式