CSS Макет - display: inline-block
Значение display: inline-block
По сравнению с 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;
}
Попробуйте сами »
Использование inline-block (встроенного блока) для создания навигационных ссылок
Одно из распространенных применений для 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;
}
Попробуйте сами »
