display:inline-block的优缺点

87 阅读 0 评论 58 点赞

我是靠谱客的博主自然信封，最近开发中收集的这篇文章主要介绍display:inline-block的优缺点，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

display:inline-block的优缺点

优点：将元素设置为行内块元素，既有行内元素可以一行显示多个元素的特性，又有块元素可以设置宽高的特性。
缺点：设置为display:inline-block后，元素与元素之间会多出空格间隙

空隙产生的原因：
当元素有行内元素的特性时，元素间的空白符都会被解析，回车换行会被解析成一个空白符，如果字体不为零那么就会占一定的宽度，并且这些间距会随字体的大小而变化

解决办法
1、写代码时元素间不换行，中间不留空隙，但这样会导致代码的可读性变差。
2、父元素设置font-size:0px;在子元素上设置想要的字体大小，但万一后面有很多的子元素，这种方法会导致代码冗余。
3、父元素设置display:table;word-spacing:-1em;
4、子元素设置浮动，如果这样做会显得display:inlline-block有点多余，因为块元素设置浮动就能在同一行了，为什么还要设display:inlline-block呢？而且都要清除浮动带来的父盒子塌陷问题。
5、子元素设置margin-left:负数px;(不兼容，不推荐)