Because when I write in the div she changes position?

Question

I write something in one of the <div> and it changes position. Because?

Here this happening: http://codepen.io/anon/pen/JHIjB

HTML:

<div class = "wrap1">
   <div>algo</div>
   <div></div>
   <div></div>
   <div></div>
</div>

CSS:

*{
  box-sizing: border-box;
}
body,html{
   height:100%;
   margin:0;
   padding:0;
}
.wrap1{
   min-height:100%; 
   background: #e1e1e1;
}
.wrap1 div{
   min-width: 45%;
   height:300px;
   min-height:50%;
   margin: 10px;
   display:inline-block;
   padding: 10px;
   border: 1px solid black;
   background: #b0bec5;
   position:relative;
}

Answer 1

Now that I understand your question I’ll explain to you:

First this happens because of the inline-block, it behaves according to the contents of the page. Try adding content outside the DIV and you will understand this. Example below:

display:inline-block;

<div class = "wrap1">
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
</div> 

According to inline-block is different from block, the block behaves by placing one above the other. The inline-block is very specific for this, adjust as all the content gives page, if not, in the same line.

In practice we use the inline-block value when we want to define a value for the width property. Under certain circumstances, some browsers ignore the property width for elements inline, then setting display: inline-block for such elements you will force the browser to recognize the value set for the property width.