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像素 ...
随机推荐
- 自定义控件和XControl控件
(1)LabVIEW的自定义控件,实际上就是对LabVIEW自带的控件的一种修改,但是这种修改只能改变它的外观,即大小.颜色.位置等等,但是功能是改变不了的.如你对一个按钮进行自定义控件,无论怎么改, ...
- OpenCDN2.0安装
部署说明 为网站加速,建立私有的CDN节点群,每部署一个CDN节点只需5分钟,无节点数量上限!参考 http://ocdn.me/ 安装需求 OpenCDN的Beta版目前在CentOS5.x - C ...
- HDU 3687 National Day Parade (暴力)
题意:给定 n 个人,在 n 列,问你移动最少的距离,使得他们形成一个n*n的矩阵. 析:这个题本来是要找中位数的,但是有特殊情况,所以改成暴力了,时间也很短,就是从第一个能够放左角的位置开始找,取最 ...
- Kicad使用经验谈
最近开始学习使用Linux上的开源软件KiCad来绘制电路图和PCB.学习这个还是比较快的,用了两天了,觉得还是蛮方便的. 在这两天的使用以及今后的使用过程中,一定会有很多想要谈的.所以,就写下这篇博 ...
- 访问修饰符与可选修饰符static的使用
在Java中修饰符较多,在这里简单说一说几个访问修饰符的选择使用,和可选修饰符static的使用. 一.访问修饰符:这是Java里用来控制访问类及类的方法.变量的访问权限,从而达到只暴露接口,来隐藏内 ...
- hibernate之saveorupdate()、save()、update()都有什么区别
saveorupdate()如果传入的对象在数据库中有就做update操作,如果没有就做save操作. save()在数据库中生成一条记录,如果数据库中有,会报错说有重复的记录. update()就是 ...
- Squid 日志详解
原文地址: http://www.php-oa.com/2008/01/17/squid-log-access-store.html access.log 日志 在squid中access访问日志最为 ...
- cocos2d-x 纹理源码分析
转自:http://blog.csdn.net/honghaier/article/details/8068895 当一张图片被加载到内存后,它是以纹理的形式存在的.纹理是什么东西呢?纹理就是一块内存 ...
- Telnet端口测试
$IP ="220.181.111.142"$Port ="801" Function Port-Test ($IP,$Port){ $Timeout = 10 ...
- 【博客迁移】hityixiaoyang.com
用了快两年简洁的cnblog现在迁移到新域名空间:http://blog.apluslogicinc.com 欢迎来踩啊~~~