CSS Линейный блок
Линейный блок
По сравнению со встроенным блоком 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;
}
Попробуйте сами »