inline-block属性的dices类div包含dots子元素时出现下移问题求解

这个错位是inline-block元素的默认垂直对齐规则导致的：

• display: inline-block的元素默认vertical-align属性值为baseline，也就是基于基线对齐
• 空的.dices元素的基线就是自身的底部边框位置
• 内部有.dots元素的.dices，基线是其内部最后一行内联级元素的基线
  两个元素按基线对齐时，有内容的.dices就会向下偏移，让两者的基线位置匹配，就出现了你看到的轻微下移现象。

最简单的修复方式是给.dices类显式指定非baseline的垂直对齐规则，比如顶部对齐：

.dices {
    height: 200px;
    width: 200px;
    border: 2px solid black;
    display: inline-block;
    margin: 20px 10px;
    background-color: rgb(165, 13, 13);
    vertical-align: top; /* 新增这行即可解决错位 */
}

你也可以根据需求把vertical-align的值换成middle（居中对齐）、bottom（底部对齐），都能解决基线对齐导致的错位问题。

内容的提问来源于stack exchange，提问作者vishal joshi