关于inline-block问题

前言

在重新学习css，做自己的学习demo时，设置一堆div在一行显示，呈现对比。

结果如图，设置了display:inline-block之后，出现了部分下沉现象。
改为float之后，又恢复正常对齐。

不过，很快就得到了解决。于是，就写了这篇关于inline-block问题的文章，包含了以前分享过的间距问题，在这里与大家分享。

一、下沉问题

原因

1. 行内元素有一个基线，所有在这一行中的元素都以这条基线为准对齐。

如文字：

而行内块元素，如图片等，会以底部为准对齐：

2. 文本在容器中默认是上对齐的，且不能设置其他垂直对齐方式

要设置垂直居中之类的，只能用p标签或者其他标签包含之后，设置这些标签的对齐方式

3. 文本是老大，它不迁就别人