近来在做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与父元素的间隙解决的更多相关文章

  1. 深入子元素的width与父元素的width关系

    深入理解父元素与子元素的width关系 对于这一部分内容,如果理解准确,可以更容易控制布局,节省不必要的代码,这里将简单研究. 第一部分:父子元素都是内联元素 代码演示如下: <!DOCTYPE ...

  2. 深入理解子元素的width与父元素的width关系

    深入理解父元素与子元素的width关系 对于这一部分内容,如果理解准确,可以更容易控制布局,节省不必要的代码,这里将简单研究. 第一部分:父子元素都是内联元素 代码演示如下: <!DOCTYPE ...

  3. CSS font-size: 0去除内联元素空白间隙

    我们在编写HTML标签的时候,通常会使用换行,缩进来保证代码的可读性.同时,在编写CSS样式的时候,也会需要把一些元素设置为inline或inline-block.这样一来,有时在页面中会出现意外的空 ...

  4. 子元素的margin-top影响父元素原因和解决办法

    这个问题会出现在所有浏览器当中,原因是css2.1盒子模型中规定, In this specification, the expression collapsing margins means tha ...

  5. 移动端开发底部元素margin-bottom失效解决办法

    一.情景 记得之前开发一个微信端页面时,发现页面底部元素margin-bottom在ios下失效,在安卓内正常...... 1.safari浏览器内页面底部元素设置margin-bottom失效: 2 ...

  6. selenium元素单击不稳定解决方法

    selenium自动化测试过程中,经常会发现某一元素单击,很不稳定,有时候执行了点击没有反映. 以下总结两种解决方法:都是通过js注入的方式去点击. 1.F12查一看,要点击的按钮,或连接,有没有on ...

  7. UiAutomatorViewer无法获取手机截图进行元素定位的解决办法

    问题描述 本来想使用UIAutomatorView定位app页面元素的,最开始我使用的是夜神模拟器,打开UIAutomatorView连接模拟器没有问题,但是后来我使用真机时发现无法连接到真机获取真机 ...

  8. Android 10不能使用uiautomatorviewer定位元素的终极解决方法

    Android app 元素定位除了使用Appium Inspector 外,还可以使用Android SDK 里tools中的uiautomatorviewer 工具.但今天打算使用 uiautom ...

  9. html 设置宽度100% 块状元素往下调解决方法

    css在设置body的宽度为100%充满整个屏幕时,当浏览器缩小时块状元素会被挤压下去 解决方案非常简单,给body设置一个最小宽度 min-width:960px; 此时即使浏览器缩小,在960像素 ...

随机推荐

  1. 自定义控件和XControl控件

    (1)LabVIEW的自定义控件,实际上就是对LabVIEW自带的控件的一种修改,但是这种修改只能改变它的外观,即大小.颜色.位置等等,但是功能是改变不了的.如你对一个按钮进行自定义控件,无论怎么改, ...

  2. OpenCDN2.0安装

    部署说明 为网站加速,建立私有的CDN节点群,每部署一个CDN节点只需5分钟,无节点数量上限!参考 http://ocdn.me/ 安装需求 OpenCDN的Beta版目前在CentOS5.x - C ...

  3. HDU 3687 National Day Parade (暴力)

    题意:给定 n 个人,在 n 列,问你移动最少的距离,使得他们形成一个n*n的矩阵. 析:这个题本来是要找中位数的,但是有特殊情况,所以改成暴力了,时间也很短,就是从第一个能够放左角的位置开始找,取最 ...

  4. Kicad使用经验谈

    最近开始学习使用Linux上的开源软件KiCad来绘制电路图和PCB.学习这个还是比较快的,用了两天了,觉得还是蛮方便的. 在这两天的使用以及今后的使用过程中,一定会有很多想要谈的.所以,就写下这篇博 ...

  5. 访问修饰符与可选修饰符static的使用

    在Java中修饰符较多,在这里简单说一说几个访问修饰符的选择使用,和可选修饰符static的使用. 一.访问修饰符:这是Java里用来控制访问类及类的方法.变量的访问权限,从而达到只暴露接口,来隐藏内 ...

  6. hibernate之saveorupdate()、save()、update()都有什么区别

    saveorupdate()如果传入的对象在数据库中有就做update操作,如果没有就做save操作. save()在数据库中生成一条记录,如果数据库中有,会报错说有重复的记录. update()就是 ...

  7. Squid 日志详解

    原文地址: http://www.php-oa.com/2008/01/17/squid-log-access-store.html access.log 日志 在squid中access访问日志最为 ...

  8. cocos2d-x 纹理源码分析

    转自:http://blog.csdn.net/honghaier/article/details/8068895 当一张图片被加载到内存后,它是以纹理的形式存在的.纹理是什么东西呢?纹理就是一块内存 ...

  9. Telnet端口测试

    $IP ="220.181.111.142"$Port ="801" Function Port-Test ($IP,$Port){ $Timeout = 10 ...

  10. 【博客迁移】hityixiaoyang.com

    用了快两年简洁的cnblog现在迁移到新域名空间:http://blog.apluslogicinc.com 欢迎来踩啊~~~