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

“留白”出现的原因

　　　行内元素默认是和父级元素的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. 【Oracle】Exadata虚拟机配置（一）

    Exadata是Oracle软硬结合的一体机.通过自己的机子不可能全然模拟出来,这里搭建的虚拟机仅仅是一个简单的.能够供我们学习Exadata的环境. 最简单能够模拟的Exadata虚拟机须要两个节点 ...

  2. 一站式学习WireShark

    一 基础 http://blog.sina.com.cn/s/blog_987e00020102x5k1.html 选中一个数据包,右键选中某一个数据包,然后follow-->Tcp Strea ...

  3. Nginx下部署TP5项目

    标签(空格分隔): linux nginx配置文件: server { listen 81; #listen [::]:80; server_name _; index index.html inde ...

  4. PDO 拿出來的 Float 數據跟数据库中的数据不匹配

    数据库中的价格字段是 float 类型的,在 Laravel 中取出会出现这样的情况 数据库:71.9 -> 程序打印:72.0 数据库:75.2 -> 程序打印:75.3 在另外一个测试 ...

  5. Nordic Collegiate Programming Contest 2015​(第七场)

    A:Adjoin the Networks One day your boss explains to you that he has a bunch of computer networks tha ...

  6. ZOJ-3261 Connections in Galaxy War 并查集 离线操作

    题目链接:https://cn.vjudge.net/problem/ZOJ-3261 题意 有n个星星,之间有m条边 现一边询问与x星连通的最大星的编号,一边拆开一些边 思路 一开始是真不会,甚至想 ...

  7. vue+element的表格分页和前端搜索

    1.前端后台管理会存在很多表格,表格数据过多就需要分页;2.前端交互每次搜索如果都请求服务器会加大服务器的压力,所以在数据量不是很大的情况下可以一次性将数据返回,前端做检索3.下面贴上一个demo & ...

  8. PatentTips - Virtualizing performance counters

    BACKGROUND Generally, the concept of virtualization in information processing systems allows multipl ...

  9. HDFS文件系统上传时序图 PB级文件存储时序图

    自己设计的时序图. 来自为知笔记(Wiz)

  10. Android怎样从外部跳进App

    解决问题有两个作用: 1.不用打开App直接进入某页面 2.实现App分享到外部,同一时候由外部进入App的闭环. 这个话题能够分双方面来讲.一方面是从微信进入App,还有一方面是从网页进入App. ...