inline-block与float的区别

两者都可以用来实现多列布局，但是inline-block却有个不容忽视的问题，那就是空白间距

如下列HTML代码：

<div>
　　<label for="inschool">
　　　　<input type="radio" name="student" id="inschool" value="inschool" checked="checked">在校生
　　</label>
　　<label for="outschool">
　　　　<input type="radio" name="student" id="outschool" value="outschool">非在校生
　　</label>
</div>

1、CSS用inline-block

label {
    display: inline-block;
    width: 30%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 1px solid;      
}

2、使用float

label {
    float: left;
    width: 30%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 1px solid;      
}

很明显inline-block比较float多了个空白间距

使用float的两个div之间的margin：0px;但是使用inline-block时，两个div之间并不是没有间距的，在IE、Firefox、Safari时，其间的空白间距为4px，而在Chrome中则是为8px

转载于:https://www.cnblogs.com/swallowBoy/p/7116834.html