В чем разница между display: block и display: inline-block?

Разница между display: block и display: inline-block заключается в способе отображения элементов. htmlacademy.ru metanit.com

display: block указывает, что элемент отображается как блочный и занимает всю доступную ширину. htmlbook.ru htmlacademy.ru Новый блок начинается с новой строки. htmlacademy.ru Например, к таким элементам относятся div, заголовок h1, параграф p. learn.javascript.ru

display: inline-block означает, что элемент отображается как строчный, но его содержимое может быть отформатировано как блок. htmlacademy.ru По отношению к соседним внешним элементам такой элемент расценивается как строчный, то есть он не отделяется от соседних элементов переводом строки. metanit.com Однако по отношению к вложенным элементам он рассматривается как блочный. metanit.com К такому элементу применяются свойства width, height, margin. metanit.com

Таким образом, display: block определяет полное блочное отображение, а display: inline-block — смесь блочного и строчного отображения.