之前一直用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. .NET 5 = .NET Core vNext

    Introducing .NET 5 .NET 5 = .NET Core vNext .NET 5 is the next step forward with .NET Core. The proj ...

  2. shell编程（2）

    一.变量简介 变量是任何一种编程语言都必不可少的组成部分,变量用来存放各种数据.脚本语言在定义变量时通常不需要指明类型,直接赋值即可,shell变量也遵循这个规则. 在Bash shell 中,每一个 ...

  3. delphi中Treeview的使用介绍

    今天重点学习了TreeView的使用方法,基本的已经写了,现在主要想说的是如何显示数据库的资料,今天只是做了个较简单的例子,一个父节点下显示数据库中某个field的值.代码如下: procedure ...

  4. Sql 中常用日期转换Convert(Datetime) convert datetime

    Convert(data_type,expression[,style]) Convert(varchar(10),字段名,转换格式) 说明:此样式一般在时间类型(datetime,smalldate ...

  5. Hadoop 部署之环境准备(一)

    目录 一.软硬件规划 二.主机名解析 三.配置 SSH 互信 四.创建用户 五.JDK 的安装 一.软硬件规划 ID 主机类型 主机名 IP 应用软件 操作系统 硬件配置 1 物理机 namenode ...

  6. Telegram Groups vs Telegram Channels

    Telegram Groups vs Telegram Channels By Iaroslav Kudritskiy  Unlike other messaging apps, using Tele ...

  7. 什么是梯度下降法与delta法则？

    梯度下降法就是沿梯度下降的方向求解函数(误差)极小值.delta法则是使用梯度下降法来找到最佳权向量.拿数字识别这个案例为例,训练模型的过程通常是这样的.输入为1万张图片,也就是1万个样本,我们定义为 ...

  8. thymeleaf如何遍历数据 each循环的使用

    首先在html开始标签中引入一个属性 xmlns:th="http://www.thymeleaf.org" 遍历数据示例 <tbody> <tr th:each ...

  9. apue-ubuntu环境搭建

    目录 apue环境搭建 title: apue环境搭建 date: 2019/11/19 19:25:18 toc: true --- apue环境搭建 下载编译 wget http://www.ap ...

  10. 冲刺Noip2017模拟赛2 解题报告——五十岚芒果酱

    题1 牛跑步(running) [题目描述] 新牛到部队,CG 要求它们每天早上搞晨跑,从 A 农场跑到 B 农场.从 A 农场到 B 农场中有 n- 个路口,分别标上号,A 农场为 号,B 农场为 ...