Строчные элементы (по факту, просто строка, которая разрывается в тех местах, где есть пробел или знаки переноса — 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.