display:inline-block;的那些事

1、为了让块元素保持在一行,或者想要给行元素设置宽高边距等属性时,为了方便,大家可能直接就使用了display:inline-block;属性。但是有一个问题,如果设置inline-block的元素不在同一行,则这两个元素之间就会有个小间距,不是margin和padding哦,是换行导致的一个空格。
比如以下列表


display: line-block;

这是设置了inline-block属性,并且每个元素单独一行,我们选中文字会发现,每个元素之间有个空格。


选中文字

若改成block元素,并使用浮动float:left;则没有了中间的空格


块元素+浮动
*** 若想解决inline-bloak元素间隙的问题,可在父元素加一个font-size:0;属性即可解决

你可能感兴趣的:(display:inline-block;的那些事)