В чем разница между display: inline и display: inline-block?
В чем именно заключается разница между значениями inline и inline-block свойства CSS display?
1 ответ(ов)
display: inline; - это режим отображения, который используется в предложении. Например, если у вас есть параграф и вы хотите выделить отдельное слово, вы можете сделать это так:
<p>
Pellentesque habitant morbi <em>tristique</em> senectus
et netus et malesuada fames ac turpis egestas.
</p>
Элемент <em> по умолчанию имеет display: inline;, потому что этот тег всегда используется в предложении. Элемент <p> имеет по умолчанию display: block;, потому что он не является предложением и не находится в предложении; это блок предложений.
Элемент с display: inline; не может иметь height или width, или вертикальный margin. Элемент с display: block; может иметь width, height и margin.
Если вы хотите добавить height к элементу <em>, вам нужно установить этому элементу display: inline-block;. Теперь вы можете добавить height и другие стили блока (часть block в inline-block), но элемент все равно будет находиться в предложении (часть inline в inline-block).
Как сделать выпадающее меню Twitter Bootstrap по наведению, а не по клику
Как расположить div внизу своего контейнера?
Медиа-запросы: Как нацелиться на десктоп, планшет и мобильные устройства?
Как отключить перенос строк в HTML?
Установить фиксированную ширину столбца таблицы независимо от количества текста в ячейках?