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

Question

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

codepen示例：Risk Matrix

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推出空白区域。

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

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

Answer 2

如果你设置：

.r5, .r4, .r3, .r2, .r1 {
  margin-left: 40px;
  > div {
    display: inline-block;
    vertical-align: top; <-- this
    width: 50px;
    height: 50px;
    border: 1px solid black;
    line-height: 50px;
    text-align: center;
  }
}

它正确对齐。

Answer 3

在overflow:hidden元素上设置<div />应该修复它，因为它会使元素忽略内部节点创建的溢出包含元素的任何边距或填充。

以下是演示：http://codepen.io/anon/pen/mDonw