CSS блоки - Layout - 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; /* the default for span */
width: 70px;
height: 70px;
padding: 15px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display:
inline-block;
width: 70px;
height:
70px;
padding: 15px;
border: 1px
solid blue;
background-color: yellow;
}
span.c {
display: block;
width:
70px;
height: 70px;
padding: 15px;
border: 1px solid blue;
background-color: yellow;
}
Используйте встроенный блок для создания навигационных ссылок
Одним из распространенных применений display: inline-block является создание горизонтальных навигационных ссылок:
Пример
.nav {
background-color: yellow;
padding: 15px;
list-style-type: none;
text-align: center;
}
.nav li {
display: inline-block;
font-size: 20px;
padding-left: 20px;
padding-right: 20px;
}
Сетка коробок
Было возможно в течение длительного времени, чтобы создать сетку коробок, который заполняет ширину браузера и обертывания красиво (при изменении размера обозревателя), с помощью свойства
float .
Тем не менее, inline-block значение свойства display делает это проще!
Примеры
Старый способ-использование float (Обратите внимание, что нам также необходимо указать свойство clear для элемента после плавающих полей):
Пример
.floating-box {
float: left;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}
.after-box {
clear: left;
}
Такой же эффект может быть достигнут с помощью значения inline-block свойства display (Обратите внимание, что clear не требуется):
Пример
.floating-box {
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}