之前一直用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. Anaconda3详细安装使用教程及问题总结

    1.Anaconda是什么? 简单来说,Anaconda是Python的包管理器和环境管理器. 先来解决一个初学者都会问的问题:我已经安装了Python,那么为什么还需要Anaconda呢?原因有以下 ...

  2. SqlDbx连接oracle(可用)

    解压SqlDbx.zip,将SqlDbx放到C:盘根目录 1.Path里面增加:C:\SqlDbx  Path是为了找tnsnames.ora 2.增加系统变量:ORACLE_HOME,路径:C:\S ...

  3. flask不得不知的基础

    python与flask不得不说的小秘密 常识引入 什么是装饰器? 在不改变源码的前提下,对函数之前前后进行功能定制. 开放封闭原则:不改变函数内部代码,在函数外部进行修改. 基本写法 import ...

  4. Java中的一些关键字：static，final，和abstract，interface，以及访问修饰符说明

    1.关键字可以修饰的说明: 关键字 属性(是否可修饰) 方法(是否可修饰) 类(是否可修饰) static 是 是 是 final 是 是 是 abstract 否 是 是 2.关键字的意义: 关键字 ...

  5. 46.前端html5标签学习

    HTML:TR  TD  TH  OL  UL  LI 这几个标签要区别 一.什么是HTML: 超文本标记语言(HyperText Markup Language),标准通用标记语言下的一个应用: 是 ...

  6. python第二部分

    什么数据类型? int 1, 2, 3 用来运算的 float 1.2 str 用来存储一定的信息"" '' list =[1,2 ,3 "有", 是]用来存储 ...

  7. 洛谷 题解 P4955 【[USACO14JAN]Cross Country Skiing 越野滑雪】

    二分+DFS 看到这么多大佬写了并查集,BFS的,还没有人写DFS版的,那么肯定是要来水水积分的啦毕竟这可是道伪紫题呢! 做法楼上楼下也讲得很清楚了吧,详见代码的注释 #include<bits ...

  8. 洛谷 题解 P2502 【[HAOI2006]旅行】

    由于此题边数比较小,所以可以先给边排个序,然后跑m遍最小生成树,每跑一次删除一条边,找最优解. 防TLE技巧 把边按从小到大的顺序排好,那么只要当前无法联通,那么后面也无法联通 最优解找法 doubl ...

  9. docker安装mongodb和redis

    一.安装mongodb docker pull mongo docker run -p 27017:27017 -d --name mongodb01 mongo docker run -p 2701 ...

  10. docker镜像内没有vim

    问题: 我们在容器中找不到vim等命令   原因: 镜像制作的时候没把这些东西加进去   解决: 用apt update更新源之后再安装vim apt update apt-get install - ...