img元素高度多出来的几像素
2024-08-28 10:52:39
HTML:
<div class="test"><img src="body2.jpg" alt=""></div>
CSS:
*{margin:;padding:;}
.test img{height: 100px;}
img的外边距和内填充均为0,然而.test的内容高度大于img的高度
img元素是一个匿名文本,该文本有一个匿名行级盒子,它的默认vertical-align是baseline,又因为上下文line-height的影响,它有一个line-height,从而使其所占高度变大,盒子下沉,往下撑开了一些距离。
从根本上解决的办法:
- 给其父元素设置line-height:0或font-size:0;
- 给img设置top对齐;
- 给img的显示设置为display:block;
PS:http://segmentfault.com/q/1010000003938500
最新文章
- 【Phylab2.0】Beta版本项目展示
- idea开发工具破解地址
- SDDC-SDN-SDS
- 兼容IE、Firefox的背景半透明内容不透明设置
- tomcat bin 中startup.sh中的环境变量配置
- AndroidManifest.xml 详解
- cmd执行mssql脚本或者执行mysql脚本
- SQL注入实验,PHP连接数据库,Mysql查看binlog,PreparedStatement,mysqli, PDO
- OSPF ProcessID(进程号)详解
- Android调试工具及方法
- 数字转化成字符串C语言
- C++编译器函数模版机制剖析 - 函数模版的本质
- CC2530芯片介绍
- poj3094---对字符串的处理
- WebStorm和IntelliJIEDA软件注册码网站(手动填写)
- LeetCode 628. Maximum Product of Three Numbers (最大三数乘积)
- 多对多中间表详解 -- Django从入门到精通系列教程
- c++代码的编译
- asp.net core 系列 15 中间件
- 【转】Java并发编程:Thread类的使用