Cтрочно-блочные элементы

Строчные элементы (по факту, просто строка, которая разрывается в тех местах, где есть пробел или знаки переноса — br) с display-inline обтекают плавающие элементы. У строчного элемента нет ширины и высоты. Его размер определяется его содержанием.

А строчно-блочные (inline-block) элементы отличаются от строчных тем, что:

• внутри них можно разместить контент любого типа.
• В IE (internet explore) приводят к свойству hasLayout, причем снять его позже не получится.
• В любых браузерах не участвуют в схеме margin-collapse (схлопывание margin по вертикали). Напомню, в margin-collapse не участвуют элементы: position:absolute, position:fixed, float:left, float:right, display:inline-block.

Рассмотрим пример:

html{
   font-size:2em;}
.left{
   float:left;
   width:200px;
   height:50px;
   background:#ccf;}
span{
   display:inline-block;
   background:#cfc;}

И далее на странице html идет какой-то контент в теге “span”. Если текста мало и места в строке хватает, то наш элемент встает рядом с плавающим элементом. Если места на строке не хватает (много контента), то элемент перенесется весь целиком на следующую строку. Т.е. элемент с display:inline-block не умеет обтекать.

Но в старых версиях IE никакого переноса не будет. Наш элемент все равно стоит рядом с плавающим элементом.

Еще нюанс для старых IE — элемент с display:inline-block нельзя сделать, если изначально display был не inline.