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

“留白”出现的原因

　　　行内元素默认是和父级元素的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. 搭建基于qemu + eclipse的kernel调试环境(by quqi99)

    作者:张华  发表于:2016-02-06版权声明:能够随意转载.转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明 ( http://blog.csdn.net/quqi99 ) 使用q ...

  2. Linux 文件系统初步

         在Linux系统中,假设我们想要知道一个文件的详细信息,那么最简便的方法自然就是ls命令了.例如以下图所看到的:当在shell输入命令"ls -l old"时,在下方就会 ...

  3. Invalid property 'sentinels' of bean class redis spring 错误修改

    /* * Copyright 2014-2015 the original author or authors. * * Licensed under the Apache License, Vers ...

  4. 【DNN引用包】

    <%@ Register TagPrefix="dnn" TagName="address" Src="~/controls/address.a ...

  5. OpenGL编程（二）绘制矩形

    上次只是创建了一个简单的窗口,把背景颜色修改为蓝色(默认是黑色),并没有向窗口添加任何图形.这次在上次代码的基础上往窗口中添加一个矩形,设置矩形的颜色,大小等. 1.添加矩形 在(参考上次代码)ren ...

  6. 洛谷 P1368 工艺 后缀自动机 求最小表示

    后缀自动机沙茶题 将字符串复制一次,建立后缀自动机. 在后缀自动机上贪心走 $n$ 次即可. Code: #include <cstdio> #include <algorithm& ...

  7. 常用模块（hashlib、suprocess、configparser）

    hashlib模块 hash是一种接受不了内容的算法,(3.x里代替了md5模块和sha模块,主要提供 SHA1, SHA224, SHA256, SHA384, SHA512 ,MD5 算法),该算 ...

  8. python note #1

    To record my process of studying python and to practice my English meanwhile, I'd like to start writ ...

  9. [NOI2003]逃学的小孩（树的直径）

    [NOI2003]逃学的小孩 题目描述 Chris家的电话铃响起了,里面传出了Chris的老师焦急的声音:"喂,是Chris的家长吗?你们的孩子又没来上课,不想参加考试了吗?"一听 ...

  10. 2014 CodingTrip - 携程编程大赛 （预赛第二场）

    1001: 食物链(poj1182),直接贴代码,稍作可过 并查集 // // main.cpp // 携程1 // // Created by zhang on 14-4-11. // Copyri ...