Hello, I have a question about the behavior of elements on the page, with alternating display:block; property display:block; and display:inline-block; . I created 3 divas and placed 3 more divs in each one, it is necessary to make it so that it would be possible to place internal divs as desired, but that external divs would not change their position. Actually, I thought that there would be no problems in this, but for some reason with different combinations of this very display: external div blocks started to fit vertically, why this happens, because if I understand correctly, display:inline-block should carry itself as a string and does not depend on what is in it, similarly to just display:block . What am I missing? How all the same blocks behave stylized in this way?
.container { width: 200px; height: 200px; display: inline-block; } .content { width: 20%; height: 20%; display: inline-block; } body, div { margin: 0px; padding: 0px; } <div class="container" style="background-color:black;"> <div class="content" style="background-color:green;"></div> <div class="content" style="background-color:#4cff00;"></div> <div class="content" style="background-color:#194e00;"></div> </div> <div class="container" style="background-color:yellow;"> <div class="content" style="background-color:green;"></div> <div class="content" style="background-color:#4cff00; "></div> <div class="content" style="background-color:#194e00; display:block;"></div> </div> <div class="container" style="background-color:blue;"> <div class="content" style="background-color:green; display:block;"></div> <div class="content" style="background-color:#4cff00;"></div> <div class="content" style="background-color:#194e00;"></div> </div> 
