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

“留白”出现的原因

　　　行内元素默认是和父级元素的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. Android干货大放送：书籍、教程、工具各种全

    最全干货分享,本文收集整理了Android开发所需的书籍.教程.工具.资讯和周刊各种资源,它们能让你在Android开发之旅的各个阶段都受益. 入门 <Learning Android(中文版) ...

  2. 在AutoLyout中动态获得cell的高度 和 autoLyout中的小随笔

    autoLyout中动态获得cell的高度和autoLyout小总结 一.在autoLyout中通过动态的方式来获取cell 的方式呢? 1.       在布局时候要有对于cell中contentV ...

  3. JAVA学习（五）：Java面向对象编程基础

    Java面向对象编程基础 面向对象(Object oriented programming,OOP)技术是一种强有力的软件开发方法,它採用数据抽象与信息隐藏技术,来使软件开发简单化,以达到代码重用的目 ...

  4. 基于IBM Bluemix的数据缓存应用实例

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:IBM® Data Cache for Bluemix 是快速缓存服务.支持 Web 和 ...

  5. server问题排查经常使用命令

    1.top 查看系统负载情况,load average CPU使用情况,按1查看每一个CPU的使用情况 shift+h  查看每一个线程的情况 2.free -m   按兆为单位输出内存的已用,未用. ...

  6. django 笔记11 装饰器

    在views.py创建 一般用来cookies的装饰器 def auth(func): def inner(request, *args, **kwargs): v = request.COOKIES ...

  7. Ionic CLI升级到3版本后2版本工程运行出错.md

    1. 问题描述: 最近将Ionic的CLI升级到了最新的版本3.2,升级后在原来Ionic2版本的CLI中创建的工程,通过ionic serve运行报错,错误类似如下: C:\Users\Admin\ ...

  8. LVS+keepalived均衡nginx配置

    如果单台LVS发生突发情况,例如宕机.发生不可恢复现象,会导致用户无法访问后端所有的应用程序.避免这种问题可以使用HA故障切换,也就是有一台备用的LVS,主LVS 宕机,LVS VIP自动切换到从,可 ...

  9. sql查询 按照规定的顺序返回结果集。

    DECODE函数 oracle 独有,功能强大.相当于 if else if IF 条件=值1 THEN RETURN(翻译值1)ELSIF 条件=值2 THEN RETURN(翻译值2) ..... ...

  10. JAVA JS 中的 modulus exponent 生成 C# 公匙

    C#用的是xml,里面是base64编码的.你上面的就是hex格式,只要把上面hex格式转成byte数组,然后在base64编码就可以了. public static byte[] Hex2Byte( ...