Why does this div shift down when content is added?

Question

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 example: Risk Matrix

Answer 1

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;
}

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

HERE is the answer why this happends.

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.

Answer 2

If you set:

.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;
  }
}

It aligns properly.