布局inline-block问题

当在一行中需要展示多个拥有块级属性的标签元素时，通常选择display:inline-block;

优点：不用设置浮动或定位，浮动脱离文档流还需要清除浮动，定位降低扩展性。

问题：

　　　1、标签元素之间会出现间隙（原因：inline-block拥有默认字体大小属性，包括标签的换行）；

　　　2、当标签内容为空时，会造成布局错乱（原因：inline-block默认字体对齐方式是vertical-align:baseline;即底部对齐）；

解决：

　　间隙处理：

　　　　1、给父级元素设置定位；

　　　　2、元素标签不换行；

　　　　3、父级元素的font-size:0;清除字体影响；

　　　　4、浮动；

　　布局错乱：

　　　　1、浮动；

　　　　2、定位；

　　　　3、设置verticle-align:top;字体上对齐；（推荐！）

 

转载于:https://www.cnblogs.com/lyzw-Y/p/10216384.html