inline-block产生的把空白消除方法

　　2015-10-27

　　初次遇到这个问题，是在QQ群中有人问起他在自己项目中所遇到的问题，一张图片与下面的div存在间隙，审查元素也没有发现有什么margin值。而我也是一个前端小菜鸟，当然是不知道怎么解决的，但是群里前辈高人们纷纷给出了自己的解决办法，我现在就来和大家分享他们的解决办法，当然还有一些我自己百度得到的各种办法。

　　inline-block产生的空白是因为标签换行时产生的。

　　一、inline-block与block元素上下之间的空白解决办法（情况如图所示）：

　　　　

 　　　　

CSS代码：
.demo-inline{
    display: inline-block;
    background-color: #00f;
}
.demo,.demo-inline{
    width: 200px;
    height: 100px;
    color: #fff;
}
.demo{
    background-color: #f00;
}
HTML代码：
<div class="main">
    <div class="demo-inline"></div>
    <div class="demo"></div>
</div>

 

　　　　1、给两个元素的父级元素css添加font-size: 0;（百度的时发现，有些人说这种方法对于有些浏览器没有效果，但是我测试了那些浏览器发现依然有用，不知道是不是时间问题。。。）

.main{
    font-size: 0;
}

 

　　　　

　　　　2、把inline-block改成block（如果不是必须的话，好吧我感觉这种方法很low。。。）

　　　　3、给inline-block的标签CSS添加vertical-align:top;

　　　　

.demo-inline{
    display: inline-block;
    background-color: #00f;
    vertical-align:top;
}

 

　　　　4、下面的DIV设置margin-top: -4px;(-4px这个值不同情况值不相同相差1px);

.demo{
    margin-top: -4px;
    background-color: #f00;
}

 

　　　　。。刚刚发现个问题可能是设置的样例有问题两个都是DIV，只是上面的DIV设置为了inline-block，如果里面存在文本，之间的空白也会消失，突然感觉自己好失败。。55555.。。。

CSS代码：
.demo-inline{
    display: inline-block;
    background-color: #00f;
}
.demo,.demo-inline{
    width: 200px;
    height: 100px;
    color: #fff;
}
.demo{
    background-color: #f00;
}
HTML代码：
<div class="main">
    <div class="demo-inline">inline-block</div>
    <div class="demo"></div>
</div>

 

　　　　

 

　　二、inline-block与inline-block之间的空白解决办法（情况如图所示）。　

　　　　

CSS代码：
.demo-inline{
    background-color: #00f;
}
.demo,.demo-inline{
    width: 200px;
    height: 100px;
    color: #fff;
    display: inline-block;
}
.demo{
    background-color: #f00;
}
HTML代码：
<div class="main">
    <div class="demo-inline"></div>
    <div class="demo"></div>
</div>

 

　　　　1、给父级元素设置font-size: 0;依然有效（代码同上）

　　　　

　　　　2、给父级元素添加letter-spacing: -8px;

.main{
    letter-spacing: -8px;
}

 

　　　　3、给后面的inline-block标签添加margin-left: -8px;　

.demo{
    background-color: #f00;
    margin-left: -8px;
}

　　　　与上面出现的状况类似，如果inline-block的div中出现文本也会发生问题（主要表现如下）

　　　　　a、第一个里面有文本　　　　

<div class="main">
       <div class="demo-inline">inline-block</div>
       <div class="demo"></div>
</div>

 

　　　　

　　　　b、第二个里面有文本

　　　　

<div class="main">
    <div class="demo-inline"></div>
    <div class="demo">inline-block</div>
</div>

 

　　　　

　　　　c、两个中都存在文本就不会移动，但是空白也没有消失（与上下的情况不同）

<div class="main">
    <div class="demo-inline">inline-block</div>
    <div class="demo">inline-block</div>
</div>

 

　　　　

　　　　都是样例惹的祸

小菜鸟写的不好还请大牛多多指教！！！