CSS中的那些怪事

  在开发中我们总是会遇到一些奇怪的事情，由于开发者自身的理解或者说是知识面的盲区。

  废话不多说，直接上代码：

html部分

  
    
   
  
  
   

     
子块一
     
子块二
     
子块三
   
 

CSS部分

*{
 margin: 0px;
 border:0px;
 padding: 0px;
}
.parents{
 margin: 0px auto;
 width:900px;
 overflow: hidden;
}
.parents:after{
 clear:both;
}
.child{
 width:300px;
 display: inline-block !important;
}
.blue{
 background-color: blue;
}
.red{
 background-color: red;
}
.green{
 background-color: green;
}
.yellow{
  background-color: yellow;
}
li{
 list-style: none;
}

按照我们的预计是不是应该长这样？

预计

然而其实它长这样:

原样

所以这是为啥，开始我是蒙蔽的。其实是这样的，当inline-block元素在水平位置的时候，默认是会有间距的。解决这个问题有这样几个方法。

方法一

你可以把代码间的空隔去除，但是这样代码就会连在一起，本人不推荐这样做

方法二

#######你可以通过对父元素设置font-size:0来解决这个问题。
.parents{
margin: 0px auto;
width:900px;
overflow: hidden;
font-size: 0;
}

当然你也要在子元素上设置字体大小

.child{
  width:300px;
  display: inline-block !important;
  font-size: 12px;
}