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

“留白”出现的原因

　　　行内元素默认是和父级元素的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. [React] Refactor a Stateful List Component to a Functional Component with React PowerPlug

    In this lesson we'll look at React PowerPlug's <List /> component by refactoring a normal clas ...

  2. Android数据分批载入-滑动究竟部自己主动载入列表

    Android数据分批载入-滑动究竟部自己主动载入列表 2014年5月9日 摘自:<Android高级开发实战-ui.ndk与安全> 本博文介绍怎样进行数据分批载入,在应用开发其中会常常使 ...

  3. cocos2d_android 第一个游戏

    依据上一篇文章.创建好cocos2d--android的开发环境 先上效果图 实现该效果的代码: package com.cn.firstgame; import org.cocos2d.layers ...

  4. log_archive_min_succeed_dest

    博客上.看了一大神的文章:http://blog.csdn.net/msdnchina/article/details/45141427 我表示有疑问:归档日志路径爆满,那么对于开启归档模式的数据库, ...

  5. Android之输入内容监听回车键【Editor】

    2.输入内容时按下回车键时监听 username.setOnEditorActionListener(new OnEditorActionListener() { @Override public b ...

  6. 【Unity】近期整理Unity4.x 项目升级Unity5.0 过程中出现的各种常见问题，与大家共享。

    近期整理Unity4.x 项目升级Unity5.0 过程中出现的各种常见问题,与大家共享. 1:Unity4.x 项目中3D模型其材质丢失,成为"白模"?       解决方式:手 ...

  7. zzulioj--1776--和尚特烦恼2——第几个素数(技巧模拟)

    1776: 和尚特烦恼2--第几个素数 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 267  Solved: 100 SubmitStatusWeb ...

  8. BZOJ 2342 Manacher

    思路: 首先用manacher可以求出以i和i+1中间为对称轴,最长回文串能扩增的长度p[i]. 然后4*(y-x)能更新答案,当且仅当y≤x+p[x]/2且y-p[y]≤x. 按i-p[i]将所有点 ...

  9. jsp留言板雏形

    编写一个简单的留言簿,实现添加留言和显示留言内容的功能 <%@ page language="java" contentType="text/html; chars ...

  10. 手把手教你进行R语言的安装及安装过程中相关问题解决方案

    这篇文章旨在为R语言的新手铺砖引路,行文相对基础,希望对在R语言安装上有问题的小伙伴提供帮助和指引.一.什么是 R 语言R 编程语言被广泛应用在统计科学和商业领域. 在各种编程语言排名中 R 语言的排 ...