之前一直用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. natively 在本地机器

    ​For JavaScript-based projects, it makes sense to have a command line task runner that executes Java ...

  2. 【S/4系列专栏】关于S/4你想知道的问题与答案

    转自:http://www.sohu.com/a/152235225_652820 S/4系列专栏将收集国内的实施案例,从各个角度进行分析,包括S/4的由来,S/4各个版本的变化,企业是否有必要选择S ...

  3. C-Lodop提示Access violation at address ...in module 'CLodopPrint32.exe' write of address

    C-Lodop提示 Access violation at address ……in module 'CLodopPrint32.exe' write of address ……最近遇到了个问题,上午 ...

  4. Redfish技术介绍

    1.1  概述 Redfish是一种基于HTTPs服务的管理标准,利用RESTful接口实现设备管理.每个HTTPs操作都以UTF-8编码的JSON格式(JSON是一种key-value对的数据格式) ...

  5. EasyNetQ使用(二)【连接RabbitMQ，SSL连接，Logging】

    如果你连接过关系数据库,例如SQL Server.你会发现EasyNetQ处理connections有点奇怪.和关系数据库通讯一直都是通过client开始的.Client 打开一个连接, 发出一个SQ ...

  6. Install Virtualbox on CentOS7---(後話，最終還是沒有用virtualbox做VM server ,感覺只適用于桌面)

    參考: https://wiki.centos.org/zh-tw/HowTos/Virtualization/VirtualBox cd /etc/yum.repos.d wget http://d ...

  7. github pages + hexo 搭建 blog 遇到的问题

    一. ERROR Deployer not found: git $ hexo d ERROR Deployer not found: git npm install --save hexo-depl ...

  8. Java实现汉诺塔移动，只需传一个int值(汉诺塔的阶）

    public class HNT { public static void main(String[] args) { HNT a1 = new HNT(); a1.lToR(10); //给汉诺塔a ...

  9. Android开发环境搭建（studio版）

    1.下载安装JDK 网址:http://www.oracle.com/technetwork/java/javase/downloads/index.html

  10. restful规范与rest_framework

    django两种开发模式: 一.前后端不分离项目 二.前后端分离项目 什么是restful规范? 在前后端不分离的项目中,网页所需要的数据可以直接通过模板渲染的方式传递到前端页面,并且可以很好的支持d ...