img与父元素的间隙解决
近来在做H5页面时,突然发现一个问题,使用一个div包裹一个img,在手机预览时,发现图片与div之间有间隙。
当时第一反应就是,是不是间距没有设置为0,于是预览了下代码:
.active img {
width:100%;
margin: 0;
}
后来浏览了一些技术文档,发现了问题所在,原来是因为在H5文档声明下,块状元素内部的内联元素的行为表现所致,简单地说就好像块状元素内部有个看不见的没有宽度的空白节点。
而不设置vertical-align属性,vertical-align默认是baseline。
现解决方案有如下两种:
1.第一种最直接的解决方法是: 设置img的标签:vertical-align:bottom 修改后的的代码:
.active img{
width:100%;
margin:0;
vertical-align:bottom;//top和bottom都可以
}
2.由于baseline是设置行内元素(inline)或者表格单元素(table-cell)的垂直对齐方式,所以可以将img转换成块级元素。
第二种方法:display:block,把父元素的font-size设为0
修改后的代码:
.active img{
width:100%;
margin:0;
display:block;
}
.active{
font-size;0;
...
}
总结:第一次写随笔记录自己工作遇到的点点滴滴,可能写的不好,还请大牛多指导。
img与父元素的间隙解决的更多相关文章
- 深入子元素的width与父元素的width关系
深入理解父元素与子元素的width关系 对于这一部分内容,如果理解准确,可以更容易控制布局,节省不必要的代码,这里将简单研究. 第一部分:父子元素都是内联元素 代码演示如下: <!DOCTYPE ...
- 深入理解子元素的width与父元素的width关系
深入理解父元素与子元素的width关系 对于这一部分内容,如果理解准确,可以更容易控制布局,节省不必要的代码,这里将简单研究. 第一部分:父子元素都是内联元素 代码演示如下: <!DOCTYPE ...
- CSS font-size: 0去除内联元素空白间隙
我们在编写HTML标签的时候,通常会使用换行,缩进来保证代码的可读性.同时,在编写CSS样式的时候,也会需要把一些元素设置为inline或inline-block.这样一来,有时在页面中会出现意外的空 ...
- 子元素的margin-top影响父元素原因和解决办法
这个问题会出现在所有浏览器当中,原因是css2.1盒子模型中规定, In this specification, the expression collapsing margins means tha ...
- 移动端开发底部元素margin-bottom失效解决办法
一.情景 记得之前开发一个微信端页面时,发现页面底部元素margin-bottom在ios下失效,在安卓内正常...... 1.safari浏览器内页面底部元素设置margin-bottom失效: 2 ...
- selenium元素单击不稳定解决方法
selenium自动化测试过程中,经常会发现某一元素单击,很不稳定,有时候执行了点击没有反映. 以下总结两种解决方法:都是通过js注入的方式去点击. 1.F12查一看,要点击的按钮,或连接,有没有on ...
- UiAutomatorViewer无法获取手机截图进行元素定位的解决办法
问题描述 本来想使用UIAutomatorView定位app页面元素的,最开始我使用的是夜神模拟器,打开UIAutomatorView连接模拟器没有问题,但是后来我使用真机时发现无法连接到真机获取真机 ...
- Android 10不能使用uiautomatorviewer定位元素的终极解决方法
Android app 元素定位除了使用Appium Inspector 外,还可以使用Android SDK 里tools中的uiautomatorviewer 工具.但今天打算使用 uiautom ...
- html 设置宽度100% 块状元素往下调解决方法
css在设置body的宽度为100%充满整个屏幕时,当浏览器缩小时块状元素会被挤压下去 解决方案非常简单,给body设置一个最小宽度 min-width:960px; 此时即使浏览器缩小,在960像素 ...
随机推荐
- FIREDAC调用中间件远程方法查询数据示例
服务端使用FDQUERY查询数据并返回TDATASET: function TServerMethods1.GetData(var sql: string): tdataset;begin qry.C ...
- How to do Mathematics
著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:匿名用户链接:http://www.zhihu.com/question/30087053/answer/47815698来源 ...
- 【转】部署web项目到weblogic上启动错误
启动weblogic报错:java.lang.ClassCastException: com.sun.faces.application.WebappLifecycleListener cannot ...
- 解决用Eclipse开发Android程序时不能生成R.java的问题
今天我照着Mars老师的视频教程开始学习Android程序开发. 但是,我的Eclipse死活不能生成R.java文件,新建的工程也不行. 然后我百度,百度出来的结果一般是说这样解决: 1.clean ...
- 【M4】非必要不提供default 构造方法
1.default 构造方法意味着,没有外来信息的情况下,进行初始化,构造出一个对象.对于有些对象是很合理的,比如数值之类的对象,可以初始化为0:对于指针之类的对象,初始化为null:对于集合如vec ...
- Oracle 生成随机密码
需求:需要定期更改密码.要求是1.密码位数11位.2.必须包含大小写字母.数字.特殊字符.3.排除一些特殊字符如().@.& oracle数据库中有可已生成随机密码包dbms_random,但 ...
- Python的包管理工具Pip
接触了Ruby,发现它有个包管理工具RubyGem非常好用,而且有非常完备的文档系统http://rdoc.info 发现Python下也有相同的工具,包含easy_install和Pip.只是,我没 ...
- android数据库操作之直接读取db文件
在对数据库操作时,常用的有两种方法: 1.在代码中建库.建表: 2.直接将相关库.表建立好,将db文件拷贝至assets目录下: 现在来看看第二种方法: private String Ge ...
- win7重新安装win7
本方法适用于原本Win7系统下安装,无需U盘,非Ghost,简单几步操作之后与光盘安装过程一样,简便易操作,愿与和我一样有“洁癖”的朋友分享. 1.下载Win7原版光盘镜像,附下载地址: Win7旗舰 ...
- 互联网常见Open API文档资源
原文地址:http://blog.sina.com.cn/s/blog_4d8713560100y272.html 所谓的开放API(OpenAPI)是服务型网站常见的一种应用,网站的服务商将自己的网 ...