Линейный блок
По сравнению со встроенным блоком display:inline, основная разница в том, что линейный блок display:inline-block позволяет задать ширину и высоту элемента.
Также, у линейного блока display:inline-block, соблюдаются верхние и нижние поля и отступы, а со встроенным display:inline это не так.
По сравнению с блоком display:block, основная разница в том, что линейный блок display:inline-block не добавляет разрыв строки после элемента, чтобы элемент могли находиться рядом.
В следующем примере показано различное поведение встроенного блока display:inline, линейного блока display:inline-block и просто блока display:block:
span.a {
display: inline; /* по умолчанию в span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display:
inline-block;
width: 100px;
height:
100px;
padding: 5px;
border: 1px
solid blue;
background-color: yellow;
}
span.c {
display: block;
width:
100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
Попробуйте сами »
Линейный блок навигации
Одна общая польза для линейного display:inline-block отображать элементы списка горизонтально, а не вертикально. Следующий пример, создание горизонтальных навигационных ссылок:
.nav {
background-color: yellow;
list-style-type: none;
text-align:
center;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
font-size: 20px;
padding:
20px;
}
Попробуйте сами »