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. 【XPath Helper：chrome爬虫网页解析工具 Chrome插件】XPath Helper：chrome爬虫网页解析工具 Chrome插件下载_教程_安装 - 开发者插件 - Chrome插件网

    [XPath Helper:chrome爬虫网页解析工具 Chrome插件]XPath Helper:chrome爬虫网页解析工具 Chrome插件下载_教程_安装 - 开发者插件 - Chrome插 ...

  2. Automate Screen or Button Taps via Tasker : Simulating keypress events

    When using Tasker, sometimes we want to do some automation on screen e.g. screen or button taps. At ...

  3. MVC扩展ModelBinder,通过继承DefaultModelBinder把表单数据封装成类作为action参数

    把视图省.市.街道表单数据,封装成一个类,作为action参数.如下: action方法参数类型: namespace MvcApplication1.Models{    public class ...

  4. Delphi 跨平台 Socket 通讯库

    Delphi 跨平台 Socket 通讯库 免费开源的Delphi 跨平台 Socket 通讯库. 源码URL:https://github.com/winddriver/Delphi-Cross-S ...

  5. Matlab的linprog解决简单线性规划问题

    一个简单的线性规划问题,使用Matlab的linprog解决 假定有n种煤,各种煤的配比为x1,x2,x3,……首先需要满足下列两个约束条件,即 x1+x2+x3……+xn=1 x1≥0, x2≥0, ...

  6. JSONObject以及json（转）

    一.JAR包简介      要使程序 可以运行 必须引入JSON-lib包,JSON-lib包同时依赖于以下的JAR包:      1.commons-lang.jar      2.commons- ...

  7. win7无线网络共享

    一.最简单的方法: 1.使用360安全卫士 2.安装一个驱动人生 二.手工设置,参考:http://www.jb51.net/os/windows/63472.html

  8. [翻译] 5点建议,让iOS程序跑得更快

      [文章原地址]http://mobile.tutsplus.com/tutorials/iphone/ios-quick-tip-5-tips-to-increase-app-performanc ...

  9. Android图片加载框架最全解析（二），从源码的角度理解Glide的执行流程

    在本系列的上一篇文章中,我们学习了Glide的基本用法,体验了这个图片加载框架的强大功能,以及它非常简便的API.还没有看过上一篇文章的朋友,建议先去阅读 Android图片加载框架最全解析(一),G ...

  10. WebService—CXF整合Spring实现接口发布和调用过程

    一.CXF整合Spring实现接口发布 发布过程如下: 1.引入jar包(基于maven管理) <!-- cxf --> <dependency> <groupId> ...