Display inline block text inside issue

Question

I have been trying out display inline-block, everything worked out great if I didn\'t add anything into the divs but when I do the div collapsed and I don\'t know exactly wh

Answer 1

display:inline-block creates a small gap, so add font-size:0 to parent. plus add vertical-align:top since by default inline-block is baseline

with all of this you have fixed your issue.

here is the snippet:

.caja {
  background-color: gray;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 5px;
}
.caja-grande {
  background-color: gray;
  border: 1px solid black;
  padding: 5px;
  width: 350px;
  margin: 5px;
  font-size: 0
}
.inline-block {
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
}

  

    Hola mundo
  
  

  
  

  

you can find more info (and options on how to solve this in other ways) in this article Fighting the Space Between Inline Block Elements