img和div之间有间隙的原因及解决方法
2024-09-06 20:18:56
div 中 存在 img标签,由于img标签的 display:inline-block 属性。
#####display:inline-block布局的元素在chrome下会出现几像素的间隙,原因是因为我们在编辑器里写代码的时候,同级别的标签不写在同一 行以保持代码的整齐可读性,即inline-block布局的元素在编辑器里不在同一行,即存在换行符,因此这就是著名的inline-block“换行 符/空格间隙问题”。如果inline-block元素间有空格或是换行产生了间隙,那是正常的,应该的。如果没有空格与间隙才是不正常的(IE6/7 block水平元素)。
解决方法:
1、把img标签的display属性改成block
img{dispaly:block;}
2、把div中的字体大小设为0:
div{font-size:0;}
3、修改img的vertical-align属性
img{vertical-align:buttom;}
img{vertical-align:middle;}
img{vertical-align:top;}
最新文章
- [译]flexbox全揭秘
- java从基础知识(七)java集合
- Linux - expect自动化远程登录脚本
- css图片叠加和底部定位
- 推荐15款最好的 Twitter Bootstrap 开发工具
- iOS 用webView加载后台返回的HTML数据
- Xcode命令行生成Bitcode静态库
- Win7系统删除微软拼音
- winform实现word转换为PDF(.doc)
- 转】Mahout推荐算法API详解
- 在虚拟机VM中安装的Ubuntu上安装和配置Hadoop
- codeforces 401D (数位DP)
- Python自动化运维之31、Tornado框架
- PHP的curl常用的5种写法
- Js 中常用方法
- jq-实战之表格筛选
- Yii前台后台登录混淆问题
- 微信小程序多张图片上传
- [IOI 2011]ricehub
- 上传图片组件封装 element ui
热门文章
- java controller 异常捕获
- gdb调试器在windows下的相关内容
- 【人工智能】【Python】Matplotlib基础
- net core天马行空系列-各大数据库快速批量插入数据方法汇总
- Linux—系统基础一
- Shell 编程基础语法
- Odoo14 TypeError: Cannot read property 'classList' of undefined
- SQL及常见的三种类型注释
- 在django中前后端传输数据的编码格式(contentType)
- LuoguP1131 [ZJOI2007]时态同步 (树形DP,贪心)