<!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学习-5-监控中心simpleMonitor搭建

    之前已经下载好的dubbo-admin-master源码中,有dubbo-monitor-simple工程,同理,使用maven命令打包成一个可执行的jar包: 1.进入dubbo-monitor-s ...

  2. Solr JAVA客户端SolrJ的使用

    一.Solrj简介 SolrJ是操作Solr的JAVA客户端,它提供了增加.修改.删除.查询Solr索引的JAVA接口.SolrJ针对 Solr提供了Rest 的HTTP接口进行了封装, SolrJ底 ...

  3. [NOIP2016]蚯蚓 题解

    题目描述 本题中,我们将用符号[c]表示对c向下取整,例如:[3.0」= [3.1」= [3.9」=3.蛐蛐国最近蚯蚓成灾了!隔壁跳蚤国的跳蚤也拿蚯蚓们没办法,蛐蛐国王只好去请神刀手来帮他们消灭蚯蚓. ...

  4. 如何创建自定义的Resource实例

    由Resource的构造函数Resources(AssetManager assets, DisplayMetrics metrics, Configuration config)了解到,需要获取ap ...

  5. P哥的桶（线段树+线性基）

    https://www.luogu.org/problem/P4839 题目: 有两个操作 1 a b  在a的位置添加b数值  (注意一个位置可以有多个值) 2 a b : 在 a到b的范围任取任意 ...

  6. 心形陀螺案例css3

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8&qu ...

  7. jmeter常用组件简介

    本文主要介绍jmeter使用过程中最常用的一些组件及其作用.性能测试时线程组中可以添加如下的组件,如图所示: test plan:测试计划,是其它组件的容器 thread:线程组,用来设置多少线程,怎 ...

  8. 16/8/23-jQuery子调用匿名函数

    通过创建一个自调用匿名函数,创建一个特殊的函数作用域,该作用域中的代码不会和已有的同名函数.方法和变量以及第三方库冲突. 自调用匿名函数写法 方法一: (function(){ //... })(); ...

  9. Spring MVC处理

    1.首先,用户发送请求,DispatcherServlet会拦截请求,但DispatcherServlet收到请求后不进行处理,而对URL进行解析得到相应的URI(资源标识符). 2.Dispatch ...

  10. vue构造器注册UI组件

    import ConfirmComponent from '../../components/confirm/index' import { mergeOptions } from '../plugi ...