在做网页的时候经常会出现一个令人困惑的现象。那就是行内元素和块级元素之间会出现“留白”。就是块级元素中明明只有一个行内元素，但行内元素却不会铺满块级元素。像这个例子：

“留白”出现的原因

　　　行内元素默认是和父级元素的baseline对齐的，而不是父级元素的bottom。baseline有时候和父级元素bottom有一段距离。

解决办法一：

　　设置vertical-align:bottom;

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .wrap{width:500px;height:300px;background: #ccc;margin:100px auto;}

            .box{border:1px solid red;}

            .box img{vertical-align: bottom;}

        </style>

    </head>

    <body>

        <div class="wrap">

            <div class="box">

                <img src="1.png" alt="" />

            </div>

        </div>

    </body>

</html>

解决办法二：

　　定义img的父容器的字体大小为0；

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .wrap{width:500px;height:300px;background: #ccc;margin:100px auto;}

            .box{border:1px solid red;font-size:0px;}

        </style>

    </head>

    <body>

        <div class="wrap">

            <div class="box">

                <img src="1.png" alt="" />

            </div>

        </div>

    </body>

</html>

解决办法三：

　　把图片设置为块级元素；

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .wrap{width:500px;height:300px;background: #ccc;margin:100px auto;}

            .box{border:1px solid red;}

            .box img{display: block;}

        </style>

    </head>

    <body>

        <div class="wrap">

            <div class="box">

                <img src="1.png" alt="" />

            </div>

        </div>

    </body>

</html>

 解决办法四：

　　给父级div设定width,height.同时img设置width：100%；height:100%;

　　

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .wrap{width:500px;height:300px;background: #ccc;margin:100px auto;}

            .box{width:200px;height:200px;border:1px solid red;}

            .box img{width:100%;height:100%;}

        </style>

    </head>

    <body>

        <div class="wrap">

            <div class="box">

                <img src="1.png" alt="" />

            </div>

        </div>

    </body>

</html>

img下面的留白解决的更多相关文章

  1. IE8的兼容性问题

    IE的兼容性问题是前端开发人员的老大难问题,不过随着时代的发展,IE6逐渐的被淘汰,现在以及很少有网站兼容IE6了,一般都兼容到IE8,现在我总结了一些IE8的兼容性问题及解决方法. 1.使用meta ...

  2. pad 横屏 cell不正常显示

    在iOS9中,适配iPad横屏的时候,我发现cell不能正常显示,其标题和线都不是从左边头部开始,而是在中间,accessoryType的图标也不再右边尾部,效果如下图 但是在iPhone中是正常的, ...

  3. 解决UITableView在iOS7中UINavigationController里的顶部留白问题

    解决UITableView在iOS7中UINavigationController里的顶部留白问题 出现问题时候的截图: 源码: 用到的类: UIViewController+TitleTextAtt ...

  4. html中通过移除空格的方法来解决浏览器上的留白间距该怎么理解？

    今天在切图的时候,碰到一个兼容性的问题,很幸运最后通过张金鑫老师的文章解决了这个问题!但在阅读张老师文章的时候,我有个地方不明白,在网上查了下也没找到我想要的答案,后来自己想了半天好像是这么回事,现在 ...

  5. img 图像底部留白的原因以及解决方法

    有时候,我们在添加图片img标签后并没有给该标签设置magrin属性的margin-bottom值,在有些浏览器中打开就会出现图像底部留白,为什么为造成这个原因?下面就来进行分析:由于img元素默认为 ...

  6. 图片左右循环连续滚动代码，解决marquee的留白问题

    <marquee ONMOUSEOUT="this.start()" ONMOUSEOVER="this.stop()" DIRECTION=" ...

  7. Android天坑ImageView控件上下留白原因与解决

    ImageView控件上下留白 如下,误以为是padding的问题.搜索无果 后来发现是需要添加android:adjustViewBounds="true",调整ImageVie ...

  8. image在div中有留白如何解决

    解决办法: 1. 将img图片display:block,即可去掉div和img之间的空白: 2. 将div的line-height设置得足够小,也可以去掉空白,例如div{line-height:5 ...

  9. 解决微信H5页面软键盘弹起后页面下方留白的问题（iOS端）

    前言:微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白 最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试,软键盘收起后,再滚动一下页面,下面的留白就会消失 ...

随机推荐

  1. [Angular] Configure an Angular App at Runtime

    It always again happens (especially in real world scenarios) that you need to configure your Angular ...

  2. C++primer书店程序

    #include <iostream> #include <string> #include <cassert> #include <algorithm> ...

  3. HTML5 canvas炫酷棱镜效果的幻灯片特效

    这是一款效果很炫酷华丽的HTML5 canvas带棱镜效果的幻灯片特效. 这个特效在每个幻灯片的前面放置一个图形.并将图形制作为三棱镜效果.它底下的幻灯片图片会被"折射"到棱镜上面 ...

  4. VS2008 集成Lua解释器

    1. 登陆官网下载源代码 -> www.lua.org -> get started ->  installing  选择系统类型(这里是Windows的,所下面载 luaDist) ...

  5. 31.ng-init 指令初始化 AngularJS 应用程序变量。

    转自:https://www.cnblogs.com/best/tag/Angular/ 1. <html> <head> <meta charset="utf ...

  6. Kali linux 2016.2（Rolling）里Metasploit的口令猜测与嗅探

    不多说,直接上干货! 对于发现的系统与文件管理类网络服务,比如Telnet.SSH.FTP等,可以进行弱口令的猜测,以及对明文传输口令的嗅探,从而尝试获取直接通过这些服务进入目标网络的通道. 对于SS ...

  7. SQLServer中同义词Synonym的用法

    以前一直认为SqlServer中的同义词(Synonym)没有什么用处,所以也一直没有去查它的语法格式.今天碰到一个问题,用Synonym来解决再好不过了.问题是这样子的,我的系统中用到了多个数据库, ...

  8. Python常用目录操作（Python2）

    Python获取当前路径   Python查看指定路径下的文件和文件夹 Python修改当前工作目录(在读取文件等时需要) Python添加import路径(有时候为了import自己写的py文件,且 ...

  9. caffe(14) python可视化

    首先将caffe的根目录作为当前目录,然后加载caffe程序自带的小猫图片,并显示. 图片大小为360x480,三通道 In [1]: import numpy as np import matplo ...

  10. Class.forName()用法详解 【转】

    来源  http://blog.csdn.net/kaiwii/article/details/7405761 主要功能 Class.forName(xxx.xx.xx)返回的是一个类 Class.f ...