为什么在添加内容时这个div会降低？

Question

我有一个5x5网格,当我向div添加内容时,它会向下移动.任何人都可以解释为什么会这样吗？

codepen示例:风险矩阵

Answer 1

你需要将它添加到vertical-align:top和margin-top:3px;

.r5 > div, .r4 > div, .r3 > div, .r2 > div, .r1 > div {
    border: 1px solid #000000;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    margin: 4px 0 0;
    text-align: center;
    vertical-align: top;
    width: 50px;
}

我相信它是因为内容将dom推出空白区域.

这就是为什么会发生这种情况的答案.

在内联级别(内联块)中,您必须指定文本的垂直对齐方式.因此,实质上没有设置垂直对齐内容的位置是默认的,即基线.这就是您的文字抵消了布局的原因.