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?

Answer 1

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.

Answer 2

Setting overflow:hidden on the <div /> elements should fix it as it will make the elements ignore any margin or padding that inner-nodes create that overflow the containing element.

Here is a demo: http://codepen.io/anon/pen/mDonw

Answer 3

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.