<!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. dubbo-go 中的 TPS Limit 设计与实现

    前言 Apache Dubbo 是由阿里开源的一个RPC框架,除了基本的 RPC 功能以外,还提供了一整套的服务治理相关功能.目前它已经是 Apache 基金会下的顶级项目. 而 dubbo-go 则 ...

  2. Word文档粘贴到DEDECMS

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...

  3. 用flask写一个简单的接口

    用falsk写一个简单的接口,这个接口的数据本来是爬虫爬取的数据,但是今天只写一个flask接口,数据就用测试数据好了. import random import re import time imp ...

  4. scrapy中的cookies参数详解

    COOKIES_ENABLED 默认: True 是否启用cookiesmiddleware.如果关闭,cookies将不会发送给web server. COOKIES_DEBUG 默认: False ...

  5. Linux 软件安装到哪里合适，目录详解

    文章来源: https://blog.csdn.net/qq_22771739/article/details/83933473 Linux 的软件安装目录是也是有讲究的,理解这一点,在对系统管理是有 ...

  6. gcc -o hello hello.c 执行过程

    GCC编译器驱动程序读取源程序文件hello.c,并将它翻译成一个可执行目标文件hello.这个翻译的过程可分为四个阶段. 1.预处理阶段 预处理器(cpp)根据以字符#开头的命令,修改原始的c程序. ...

  7. 神经网络 fann 教程 英文 以及 翻译 参考

    http://fann.sourceforge.net/fann_en.pdf http://blog.csdn.net/fengshuiyue/article/details/41446257

  8. websocket初体验

    (function (window) { var wsUri = "ws://echo.websocket.org:9150"; var output; MyWebSocket = ...

  9. vue+element-ui国际化（i18n）

    1. 下载element-ui和vue-i18n: npm i element-ui --save   npm i vue-i18n –save 2.  创建一个  i18n 文件夹, 在main.j ...

  10. Windows系统命令整理-Win10

    硬件相关 显卡 显卡升级 - 我的电脑->属性->设备管理器->显示适配器->更新驱动程序 服务 telnet 安装:启用或关闭Windows 功能,勾选上“Telnet客户端 ...