Как ведут себя inline-block элементы

#html #display

Здравствуйте, у меня возник вопрос по поводу поведения элементов на странице, с чередованием
свойства display:block;и display:inline-block;. Я создал 3 дива и в каждый поместил
еще по 3 div, нужно сделать так, что бы было возможно распологать как угодно внутренние
div, но что бы внешние div не меняли свою позицию. Собственно я думал, что в этом никаких
проблем не будет, но почему-то при разных комбинациях этого самого display: внешние
div блоки начали вмещаться по вертикали, почему это происходит, ведь если я правильно
понимаю, display:inline-block должен везти себя просто как строка и не зависеть от
того, что в нем находится, аналогично с просто display:block. Что я упускаю? Как же
все таки ведут себя блоки, стилизованные таким образом?



.container {
  width: 200px;
  height: 200px;
  display: inline-block;
}
.content {
  width: 20%;
  height: 20%;
  display: inline-block;
}
body,
div {
  margin: 0px;
  padding: 0px;
}

  

  

  



  

  

  



  

  

  





    

Ответы

Ответ 1

Чтобы исправить, задайте vertical-align для контейнеров, например, top.



.container {
  width: 200px;
  height: 200px;
  display: inline-block;
  vertical-align: top;
}
.content {
  width: 20%;
  height: 20%;
  display: inline-block;
}
body,
div {
  margin: 0px;
  padding: 0px;
}