之前一直用float浮动方法布局，因为display:inline-block有间隙，现在找到办法了。在父元素上面加font-sise:0，就可以了。

效果如图：

代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            body{

                margin: 0;

                padding: 0;

            }

            ul{

                box-sizing: border-box;

                list-style: none;

                margin: 0;

                padding: 0;

                font-size: 0;

            }

            li {

                display: inline-block;

                width: 25%;

                text-align: center;

                box-sizing: border-box;

                border: 1px solid;

            }

            img{

                width: 100px;

                height: 100px;

            }

            p{

                font-size: 20px;

            }

        </style>

    </head>

    <body>

        <ul>

            <li>

                <img src="../img/angle.png" />

                <p>天使在唱歌</p>

            </li>

            <li>

                <img src="../img/angle.png" />

                <p>天使在唱歌</p>

            </li>

            <li>

                <img src="../img/angle.png" />

                <p>天使在唱歌</p>

            </li>

            <li>

                <img src="../img/angle.png" />

                <p>天使在唱歌</p>

            </li>

        </ul>

    </body>

</html>

【小知识点】去除inline-block元素间间距的办法的更多相关文章

  1. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  2. 去除inline-block元素间间距的N种方法

    这篇文章发布于 2012年04月24日,星期二,22:38,归类于 css相关. 阅读 147771 次, 今日 52 次 by zhangxinxu from http://www.zhangxin ...

  3. [转]去除inline-block元素间间距的N种方法

    来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子 ...

  4. 去除inline-block元素间间距的N种方法<转>

    一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...

  5. 去除inline-block元素间间距的N种方法(转)

    一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...

  6. 去除inline-block元素间间距的N种方法-zhangxinxu

    张鑫旭原文:点这里进入原文 另外附上大漠老师的如何解决inline-block元素的空白间距地址!!! 去除inline-block元素间间距的N种方法: 一.现象描述 真正意义上的inline-bl ...

  7. 转载>>去除inline-block元素间间距的N种方法《重》

    一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...

  8. 如何消除inline-block元素间间距问题（转）

    一.现象描述    真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type=" ...

  9. css 小知识点：inline/inline-block/line-height

    inline: 此元素会被显示为内联元素,元素前后没有换行符.因此:无法设置宽度和高度- inline-block: 行内块元素.元素前后没有换行符(CSS2.1 新增的值) 用通俗的话讲,就是不独占 ...

随机推荐

  1. ServletConfig对象的使用

    作用: * 获取Servlet的配置信息 * 获取ServletContext对象 *主要是用于加载servlet的初始化参数.在一个web应用可以存在多个ServletConfig对象(一个Serv ...

  2. 阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_18-异常处理-不可预知异常处理

    框架抛出来的或者一些第三方的组件抛出来的异常.我们根本不知道它所对应的错误代码的信息,所以我们也没有办法给用户返回具体的错误代码和错误信息. 我们先在Map中定义有一些不可预知的异常,定义错误代码和错 ...

  3. [Scikit-learn] *2.3 Clustering - MeanShift

    sklearn.cluster.MeanShift Ref: http://scikit-learn.org/stable/auto_examples/cluster/plot_mean_shift. ...

  4. 使用graphviz绘制流程图

    转自 http://www.cnblogs.com/CoolJie/archive/2012/07/17/graphviz.html

  5. 【leetcode】521. Longest Uncommon Subsequence I

    problem 521. Longest Uncommon Subsequence I 最长非共同子序列之一 题意: 两个字符串的情况很少,如果两个字符串相等,那么一定没有非共同子序列,反之,如果两个 ...

  6. AWS物联网解决方案之：如何将设备安全地接入AWS IoT

    1 简介 AWS IoT解决方案是一个全托管的云平台,使互联设备可以轻松安全地与云应用程序及其他设备交互.AWS IoT可以支持数十亿太设备和数万亿条消息,并且可以对这些消息进行处理并将其安全可靠地路 ...

  7. VB6_小林的气象类模块

    前言. [如果使用过程有什么问题可以QQ或邮箱联系我. 1919988942  | w2638301509@gmail.com] ___________________________________ ...

  8. [转] zookeeper 本地启动多节点

    1. zoo.cfg配置文件如下: # The number of milliseconds of each tick tickTime=2000 # The number of ticks that ...

  9. neo4j 将一个节点的属性复制到另一个节点上

    在使用Python操作Neo4j数据库的时候,经常会遇到重复的节点,需要将一个节点的属性复制到另一个节点,之后将该节点删除. def copy_node_properties(source_node_ ...

  10. Linux系列（12）之例行工作调度

    你知道工作调度有哪几种吗? 你知道在进行工作调度时需要哪些服务在运行吗? 你知道突发性工作调度的指令at的用法吗? 知道如何管理at的工作调度吗? 知道at指令进行工作调度的原理吗? 知道什么是背景任 ...