为display:inline-block有很多方便,可以水平垂直居中,又可以设高宽,但有个问题,当使用inline-block的时候发现当给各个元素相应的百分比的时候,他们的总和是大于100%的,从而出现了换行的情况,一开始没怎么在意这个问题,今天进行了一下研究,才发现原来display:inline-block给的元素中间会有一个空白的间隙,如图:
对应的代码是:
其实这个空白间隙虽然在代码中没有体现,但其实是我们忽略的空格,因为当我们把元素设置inline-block的时候,它已经具有了行内的性质,也就是说元素跟元素之间是可以打入空格的,而由于我们写代码的习惯,上述我们定义的两个元素之间通常会有换行,而不论多少空格都会变成一个空格,所以才会出现空隙现象。