今天本来想聊一下margin和padding,但是当我给div加了一个display:inline-block之后,发现一个问题:

.box_demo{border: 1px solid #333;width: 80px;display: inline-block;}
<div class="box_demo">
box1
</div>
<div class="box_demo">
box2
</div>

发现没有,中间赫然有着4px的间距!!之前居然一直都没有注意到!!!

我想着是不是只有block元素才有的问题,看了一下inline元素,依然存在这个问题,这个引起了我的注意,在网上搜罗了一番,渐渐发现,这确实是一个坑。

称      号:“inline-block元素间间隙问题”。

现      象:如上。

产生原因:换行、空格导致。

解决办法:(1)去掉换行;

         优点:此解法so easy;缺点:代码洁癖者哭了;

     (2)使用负margin值;

           优点:此解法so easy;缺点:字体大小不同,他们的间隙也不同,到底该负margin多少 %>_<%;

    (3)使用font-size:0;

CSS:

.wrap{font-size:;}
.box_demo{border: 1px solid #333;
width: 80px;
display: inline-block;
font-size: 16px;}

HTML:

<div class="wrap">
<div class="box_demo">
box1
</div>
<div class="box_demo">
box2
</div>
</div>

截图:

解铃还须系铃人,既然这个间隙是由于空格等文本类的问题产生的,那好,我让你的字体大小为零,然后让该显示的字体还设置为16px,间隙就不见了。

           优点:此解法so easy;缺点:可能会存在一些兼容性问题;

看到这里,关于这个奇葩问题的所有核心内容以就完了,你又成功的识破了一个坑,并知道如何填补它,如果想继续深一步了解,可以继续往下看。

》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

其实这个问题还可以围绕着这个“由于文本产生的问题”,还可以有其他解法:

比如:(1)使用letter-spacing;

         修改上述CSS:

.wrap{letter-spacing: -4px;}
.box_demo{border: 1px solid #333;
width: 80px;
display: inline-block;
letter-spacing:;}

      优点:此解法so easy;缺点:不兼容(Opera浏览器下需设置为:-8px);

   (2)使用word-spacing;

      方法同上,只用把letter改为word即可;

      优缺点同上;

还有一个非常重要的问题,上述解法对于低于IE7的兼容性,有兴趣的可以点击下边的链接:

http://demo.doyoe.com/css/inline-block-space/

说一说inline-block的奇葩之处的更多相关文章

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

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

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

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

  3. inline, block, and inline-block

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

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

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

  5. inline,block,inline-block解析

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

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

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

  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 ...

随机推荐

  1. js窗口边缘滑入滑出效果-初级代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. setImageBitmap和setImageResource

    同样的布局文件,小分辨率手机: 1.使用setImageBitmap设置时,出现如下现象:  2.使用setImageResource时,图片显示正常 原因: setImageResource(id) ...

  3. uva 10622

    http://vjudge.net/contest/140673#problem/H 求某个数字(最大到10^9,可为负值)写成完全p次方数的指数p是多少 分析: 先进行唯一分解,之后p整除各个素因子 ...

  4. 初识Winform , 还好没喜欢上控制台

    虽然没听的太懂, 不过还是写点东西吧. 我呢, 就跟着这本书写了个学生管理系统 前面刚会了SQLserver, 所以这个学生管理系统需要连上数据库, 毕竟学了不用天诛地灭 既然需要连接数据库, 就要用 ...

  5. 面试题一 链表中倒数第k个结点

    void findLastK(LinkedNode head, int k, int n){ if (head == NULL || k == 0) return; LinkedNode t1 = h ...

  6. [原创]cocos2d-x研习录-第三阶 特性之触屏

    游戏跟视频最大的区别就是互动,而手游(基于智能手机)主要靠触摸屏幕.重力传感和虚拟键盘等方式实现互动.这里主要记录Cocos2D-x对玩家触屏操作的处理. 在Cocos2D-x中触屏分为单点触屏和多点 ...

  7. 如何让WordPress支持上传更多文件类型

    如何让WordPress支持上传更多文件类型   可以在functions.php中这样写: 1 2 3 4 5 6 7 8 9 add_filter('upload_mimes', 'wpdit_f ...

  8. Cacti-安装和使用详解

    Cacti是一套基于PHP,MySQL,SNMP及RRDTool开发的网络流量监测图形分析工具.Cacti是通过 snmp get来获取数据,使用 RRDtool绘画图形,而且你完全可以不需要了解RR ...

  9. 查杀 oracle sql 卡死的进程

    --查出SID名字select * from v$access where object ='PKG_SMSSEND_PROC';--通过sid查出spidselect  spid,osuser, s ...

  10. Java输入输出流(一)——常用的输入输出流

    1.流的概念:在Java中,流是从源到目的地的字节的有序序列.Java中有两种基本的流--输入流(InputStream)和输出流(OutputStream). 根据流相对于程序的另一个端点的不同,分 ...