<!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. AutoLayout面试题记录-用NSLayoutConstraint写动画

    import UIKit class ViewController: UIViewController { @IBOutlet weak var topY: NSLayoutConstraint! @ ...

  2. 20180708-Java运算符

    public class Test{ public static void main(String args[]){ int a = 10; int b = 20; int c = 25; int d ...

  3. NOIp 基础数论知识点总结

    推荐阅读 NOIp 数学知识点总结: https://www.cnblogs.com/greyqz/p/maths.html Basic 常用素数表:https://www.cnblogs.com/g ...

  4. [CSP-S模拟测试]:砖块（模拟）

    题目描述 在一个二维网格平面上,一个网格的坐标由其左下角的点的坐标定义$(x,y)$.在一个二维网格平面上,一个网格的坐标由其左下角的个点的坐标定义$(0,0)$的区域中,此时存在高度为$k$的初始砖 ...

  5. log4j file 路径

    默认以System.getProperty("user.dir")为准 用LOGGER.warn(System.getProperty("user.dir")) ...

  6. Sublime Text3 代码编辑器使用笔记

    Sublime Text3 作为一款代码的文本编辑器,有许多插件,这一点是我认为 Sublime Text3 很强大的原因之一.插件的安装可以参考下面的文章. Sublime Text3 插件安装教程 ...

  7. 解决在vue_cli上使用mui或引入mui.js各种报错及问题

    原文:https://blog.csdn.net/u012815877/article/details/81187826 在main.js里添加 import mui from './assets/j ...

  8. jQuery FileUpload doesn't trigger 'done'

     https://stackoverflow.com/questions/14674999/jquery-fileupload-doesnt-trigger-done   If your server ...

  9. video.js播放rtmp

    项目中要用到rtmp直播和点播.要求:点播能够调整播放进度 开始用腾讯提供的播放器,老卡,画质差,很多时候播不出来,rtmp点播还不能快进. 后来用Wowza自带的flash rtmp播放器,有源码 ...

  10. 应用安全 - Web安全 - 逻辑漏洞整理

    短信轰炸 .Fiddler抓包repeat .burpsuite 修改 PHPSESSID ->字典爆破 如选择a-z .burpsuite手机号遍历 防御: 设置图片验证码,每次获取短信验证码 ...