1、现象：

 <!doctype html>

 <html lang="en">

     <head>

         <meta charset="UTF-8" />

         <title>除掉inline-block 间距</title>

         <style type="text/css">

             * {

                 padding: 0;

                 margin: 0;

             }

             ul {

                 list-style: none;

             }

             ul li {

                 display: inline-block;

                 width: 100px;

                 border: 1px solid red;

             }

         </style>

     </head>

     <body>

         <ul>

             <li>555</li>

             <li>666</li>

             <li>777</li>

         </ul>

     </body>

 </html>

显示效果：

2、处理方法

父元素设置font-size: 0;

 <!doctype html>

 <html lang="en">

     <head>

         <meta charset="UTF-8" />

         <title>除掉inline-block 间距</title>

         <style type="text/css">

             * {

                 padding: 0;

                 margin: 0;

             }

             ul {

                 list-style: none;

                 /*关键属性设置*/

                 font-size: 0;

             }

             ul li {

                 display: inline-block;

                 width: 100px;

                 border: 1px solid red;

                 font-size: 16px;

             }

         </style>

     </head>

     <body>

         <ul>

             <li>555</li>

             <li>666</li>

             <li>777</li>

         </ul>

     </body>

 </html>

显示效果：

除掉inline-block 间距的更多相关文章

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

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

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

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

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

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

  4. inline, block, and inline-block

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  5. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  6. inline,block,inline-block解析

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

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

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

  8. CSS 概念 Block Inline Containing block

    Block 元素 包括 "block-level box," "block container box," and "block box" ...

  9. [CSS3] CSS Display Property: Block, Inline-Block, and Inline

    Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...

  10. 去除inline-block元素间间距的N种方法<转>

    一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...

随机推荐

  1. Tomcat篇

    安装tomcat 先从tomcat官网找到最新的版本下载地址,我找的是Core下的安装包,下载到本地: wget http://mirror.bit.edu.cn/apache/tomcat/tomc ...

  2. 向USB设备发送SCSI命令

    http://bbs3.driverdevelop.com/simple/?t84347.html { BOOL status = ; DWORD accessMode = , shareMode = ...

  3. systemtap 探针定制

    http://blog.163.com/digoal@126/blog/static/163877040201391123645546/

  4. MYSQL 源代码编绎脚本

    http://blog.csdn.net/hopingwhite/article/details/5808101

  5. Error launching remote program: No such file or directory

    iPhone真机调试报如下错误时,关掉Xcode,重新启动就可以了,注意是关掉Xcode,彻底关掉.Error launching remote program: No such file or di ...

  6. C#编程（九）----------控制台I/O

    原文链接:http://blog.csdn.net/shanyongxu/article/details/46454985 控制台I/O 可以使用Console.ReadLine()方法从控制台中读取 ...

  7. 解决小米手机不能运行Android Studio程序的问题

    转载自:解决小米手机不能运行Android Studio程序的问题 问题描述 Android Studio升级到2.3版本之后,小米手机MIUI8不能运行Android Studio程序,报如下错误: ...

  8. Sublimetext3将空格转换为Tab

    最近在学习Python,从网上粘贴的代码很多缩进都是空格,这样就会导致代码执行的时候报错,因为Python是依靠缩进来判断代码层次的.我的编辑器是Sublime Text 3看了一下,原来转换成Tab ...

  9. Asp.Net Core App 部署故障示例 1

    相关阅读:Windows + IIS 环境部署Asp.Net Core App 1.  HTTP Error 502.5 – Process Failure 环境 Windows Server 201 ...

  10. 数据库实例: STOREBOOK > 表空间 > 编辑 表空间: TEMP

    ylbtech-Oracle:数据库实例: STOREBOOK  >  表空间  >  编辑 表空间: TEMP 表空间  >  编辑 表空间: TEMP 1. 一般信息返回顶部 1 ...