In my example, the first inline-block (with text) drops out of the line. The vertical-align: top parameter corrects the situation, but why is it happening there? It is not clear how adding text inside the block broke the construction

 <style> .in1 { width: 120px; height: 120px; background-color: green; display: inline-block; margin-right: 10px; margin-bottom: 10px; background-size: cover; } .span { font-size: 12px; color: white; font-family: Tahoma; } </style> <div class="container1"> <div class="in1"><span class="span">Some text</span></div> <div class="in1"></div> <div class="in1"></div> <div class="in1"></div> <div class="in1"></div> </div>

1 answer 1

Add the position:absolute; property to the span position:absolute;

 .span { position:absolute; font-size: 12px; color: white; font-family: Tahoma; }
  • the property float:left; can also solve the problem float:left; in class in1 - Alexander
  • Thanks for the answer, but I have a request “on the fingers” to explain why when adding text, the block was moved to another line. Interested in precisely the reason for such a transfer. - MAslaev 5:58 pm