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;
}
Спробуйте самі »
