为什么添加内容后此div下移? [英] Why does this div shift down when content is added?

问题描述

我有一个5x5的网格，当我向div中添加内容时，它会向下移动.谁能解释为什么会这样?

I have a 5x5 grid and when i add content to the div, it is shifted down. Can anyone explain why this is happening?

codepen示例:风险矩阵

codepen example: Risk Matrix

推荐答案

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

You need to add this to vertical-align: top and 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推出了空白空间.

I believe its because content pushes the dom out of empty space.

HERE是发生这种情况的答案.

在内联级别(内联块)中，您必须指定文本的垂直对齐方式.因此，本质上，无需设置垂直对齐内容的位置，就将其默认值设置为基线.这就是为什么文本偏移布局的原因.

In a inline-level (inline-block) you have to specify the vertical alignment of text. So in essence without setting where the vertical alignment is content is placed in its default which is baseline. This is why your text offsetted your layout.

这篇关于为什么添加内容后此div下移?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！