关于display inline-block 产生间距的问题

我们在使用给标签添加diaplay:inline-block属性后,标签并排显示后之间会产生3px的间距空白问题。

间距是如何产生的?

1.我们在使用内联元素的标签时候,例如img标签没有设置display属性同样会产生间距,这是因为我们在书写标签的时候为了代码的简洁直观会换行,但是浏览器在解析的时候会把这个换行解析成一个字符,这样就会有一个3px空白,display:inline-block属性产生的原因一样如此。

当我们不使用换行时,就不会有间距了。

解决方法:

1.标签不换行;

2.设置左间距:margin-left:-3px;

3.标签不闭合,浏览器会自动闭合;

 

 

posted @ 2017-09-21 16:38  玛丽莲梦露  阅读(457)  评论(0编辑  收藏  举报