<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>css inline-block间距怎么解决</title>

    <style type="text/css">

     * {

       margin: 0;

       padding: 0;

     }

     li {

       width: 100px;

       height: 40px;

       display: inline-block;

       border: 1px solid red;

       text-align: center;

       line-height: 40px;

     }

    </style>

  </head>

  <body>

     <ul>

       <li>HTML</li>

       <li>CSS</li>

       <li>JavaScript</li>

       <li>XML</li>

       <li>JSON</li>

     </ul>

  </body>

</html>

　　浏览器显示：

inline-block默认有间距

可以这样写：

 <body>

     <ul>

       <li>

       HTML</li><li>

       CSS</li><li>

       JavaScript</li><li>

       JSON</li>

     </ul>

  </body>

　　浏览器显示:

元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。

如何去除inline-block的默认间距的更多相关文章

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

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

  2. inline-boock的默认间距

    1 2 3 4 div{width:900px;} div li{ display:inline-block; width:300px;} <ul>     <li></ ...

  3. 如何去除掉inline-block元素之间的默认间距

    前几天写一个页面 div{width:900px;} div li{ display:inline-block; width:300px;} <ul> <li></li& ...

  4. css去除ios文本框默认圆角

    css去除ios文本框默认圆角 input, textarea {-webkit-appearance: none;}

  5. inline-block默认间距

    inline-block元素默认会有间距   解决方法之移除空格 元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了.考虑到代码可读性,显然连成一行的写法是不可 ...

  6. inline-block,inline,block,table-cell,float

    float:left ---------------------------------------------------------------------------------------- ...

  7. 去掉inline-block元素默认间距的几种方法

    方法1:使用负margin值一般是-3px,部分浏览器可能不同,不太推荐使用. 方法2:去掉多余空格将元素紧挨着写去掉多余空格,但降低了可读性. 方法3:使用font-size:0在外层父元素加上fo ...

  8. inline,block,inline-block的区别

    display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...

  9. 块状元素和内联元素 【inline block】

    // 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...

随机推荐

  1. 奇异值分解(SVD)(基础知识)

    参考:https://www.cnblogs.com/pinard/p/6251584.html 参考:http://blog.csdn.net/u010099080/article/details/ ...

  2. Python3及Pycharm安装

    1.首先去python官网下载相应版本的Python安装包.如下: 2.下载完成后解压,双击exe文件进行安装,看到如下界面:Install Now表示默认安装:Customize installat ...

  3. 1349 - View's SELECT contains a subquery in the FROM clause

    mysql创建视图 报错1349 - View's SELECT contains a subquery in the FROM clause:: 原因创建视图的sql语句中有不支持子查询, 所以需要 ...

  4. DELPHI 调试IOS时出现 Please specify exact device preset UUID

    右击设备DEVICE, 选择REFRESH刷新, 再重新选择一个设备即可.

  5. iOS设计模式之桥接模式

    一,什么是桥接模式 定义 抽象出层次结构.上层抽象接口的职能,实现上层抽象接口的职能,层级间的通信协议(可以抽象为接口).桥接模式的目的,就是把抽象层次结构从具体的实现中分离出来,使其能够独立变更.抽 ...

  6. LRU management

    LRU management 字典树用来查找值,实现map<string,int>操作 tips:tot必须从一开始QAQ #include<bits/stdc++.h> us ...

  7. [CSP-S模拟测试]:Equation（数学+树状数组）

    题目描述 有一棵$n$个点的以$1$为根的树,以及$n$个整数变量$x_i$.树上$i$的父亲是$f_i$,每条边$(i,f_i)$有一个权值$w_i$,表示一个方程$x_i+x_{f_i}=w_i$ ...

  8. Java 设计模式之 策略模式

    思维导图: 我们先来看 STRATEGY 设计模式的通俗解释: 跟不同类型的MM约会,要用不同的策略,有的请电影比较好,有的则去吃小吃效果不错,有的去海边浪漫最合适,但目的都是为了得到 MM 的芳心, ...

  9. python之面向过程，函数式编程，面向对象浅析

    python编程有面向过程.面向函数.面向对象三种,那么他们区别在哪呢?这个问题,让我想起我在学习编程的时候,我的老师给我举的例子.分享给大家. 面向过程就是将编程当成是做一件事,要按步骤完成! 比如 ...

  10. vue2.0 之 douban （六）axios的简单使用

    由于项目中用到了豆瓣api,涉及到跨域访问,就需要在config的index.js添加代理,例如 proxyTable: { // 设置代理,解决跨域问题 '/api': { target: 'htt ...