图片底部的空隙实际上涉及行内元素的布局模型，图片默认的垂直对齐方式是基线，而基线的位置是与字体相关的。所以在某些时候，图片底部的空隙可能是 2px，而有时可能是 4px 或更多。不同的 font-size 应该也会影响到这个空隙的大小。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<style>

  .wrapper {

    font-size: 0;

  }

  .inner {

    display: inline-block;

  }

  img {

    width: 100px;

    height: 100px;

  }

  .test {

    font-size: 16px;

  }

  .img {

    vertical-align: top;

  }

</style>

<body>

  <div class="wrapper">

    <div class="inner img">

      <img src="1.jpg" alt="">

    </div>

    <div class="inner">

     <p class="test">Lorem ipsum dolor sit amet </p>

    </div>

  </div>

</body>

</html>

　　

img图片下面出现莫名的下边距解决办法的更多相关文章

  1. img图片底部出现莫名的下边距问题

    谷歌中这样是解释的: 图片底部的空隙实际上涉及行内元素的布局模型,图片默认的垂直对齐方式是基线,而基线的位置是与字体相关的.所以在某些时候,图片底部的空隙可能是 2px,而有时可能是 4px 或更多. ...

  2. IMG图片下面出现空格、下边距的解决办法

    放图片的时候总有一个间隔,加上div看,是图片未充满div.最后父级元素加了一个 font-size:0,去掉了间隔. <div class="cut-img" style= ...

  3. 前端问题——png图片在IE6下透明失效，解决办法

    今天,一位同事问我问题,png 图片在IE6下透明背景失效. 解决办法,在网上查了很多,最后还是采用两种方案来解决这个问题 1.把这个网页的png格式图片变更为gif格式的图片.问题解决 2.就是让这 ...

  4. Android之com.nostra13.universalimageloader加载图片抛出OutOfMemroyError错误的多种解决办法

    com.nostra13.universalimageloader是用来加载图片非常好的框架,但是也有问题,一旦图片过多的话,很容易就会提示OutOfMemroyError错误,也就是内存溢出的问题, ...

  5. SpringBoot集成百度UEditor图片上传后直接访问404解决办法

    SpringBoot项目上传图片一般是上传至远程服务器存储,开发过程中可能会上传至当前项目的某个静态目录中,此时就会遇到这个问题,文件在上传之后直接访问并不能被访问到,必须重新加载项目. 首先分析一下 ...

  6. angularjs图片上传后不刷新的解决办法

    刚接触angularjs在使用的过程中遇到这个问题 首先我们的图片地址是根据ID来获取的,所以用了指令来完成图片的绑定 .directive("cImg", ['appUrl', ...

  7. SpringMVC中css,js,图片等静态资源被拦截的解决办法

    一.静态资源的存放路径 css,js,图片等静态资源存放在项目的路径必须为 二.html.jsp导入静态资源文件 html.jsp页面中的导入静态资源文件: js: css: 图片: 二.web.xm ...

  8. 使用Photoshop不改变图片尺寸,保存图片到30K以下的解决办法

  9. vue请求网络图片403错误，图片有占位但是显示不出来解决办法

    在index.html 增加一个meta标签 <meta name="referrer" content="no-referrer" />

随机推荐

  1. MyEclipse10安装Svn插件的几种方法

    http://blog.sina.com.cn/s/blog_4f925fc30102e9xe.html 方法一:直接解压 下载SVN插件:site-1.6.18.zip 解压后将其全部文件拷贝至:D ...

  2. NuGet安装及使用教程

    Nuget是一个.NET平台下的开源的项目,它是Visual Studio的扩展.在使用Visual Studio开发基于.NET Framework的应用时,Nuget能把在项目中添加.移除和更新引 ...

  3. Nodejs学习总结 -Express 登录注册示例（二）

    项目创建后,我们来做个登录注册实例,详细操作步骤如下. 1.新建项目demo ,具体操作步骤参考上一章内容 https://www.cnblogs.com/Anlycp/ 2.添加mysql和sess ...

  4. android:layout_weight的真实含义（转）

    首先声明只有在Linearlayout中,该属性才有效.之所以Android:layout_weight会引起争议,是因为在设置该属性的同时,设置android:layout_width为wrap_c ...

  5. JS中判断 !="" 或者 !=null 失效

    var id; //... if (!id&& typeof (id) != "undefined" && id!= 0) { //id为null ...

  6. linux系统下静态IP的设置

    首先说明:下面用的系统为:kali 4.6.0版本的哦:不同的系统是不一样的:反正吧,在ubuntu上的好多方法在kali上就不管用,并且吧,不同的ubuntu的版本也不一样的: 第一步:设置网络的I ...

  7. 從 Internet 安裝 Cygwin

    從 Internet 安裝 Cygwin 如果您有高速的 Internet 連線, 可以考慮用這個方法, 否則不建議使用 執行 setup.exe Cygwin Setup 畫面, 按 Next. C ...

  8. appml的安装与使用

    来自w3cshool的中文文档:http://www.w3cschool.cc/appml/appml-tutorial.html 我们要做的是完整的例子,所以从这里http://www.w3csch ...

  9. MySQL 解压包 安装

    1.解压 2.配置mysql bin的环境变量 3.配置my-defalue.ini 配置文件 或自己建立一个my.ini文件 [mysqld] basedir=F:\mysql\mysql-5.6. ...

  10. Centos7下配置Redis开机自启动

    最近在做作业的时候需要用到Redis缓存,由于每次重启服务器都需要重新启动Redis,也是忒烦人,于是就有了这一篇博客,好,废话不多说. 只有两个步骤: 设置redis.conf中daemonize为 ...