Вопрос проверяет знание основных свойств display в CSS и их различий.
Основные значения:
block — элемент занимает всю ширину, начинается с новой строки.
inline — элемент занимает только необходимую ширину, не переносится.
inline-block — как inline, но с возможностью задавать ширину/высоту.
none — элемент скрыт и не занимает место.
1. block (блочный):
Примеры: <div>, <p>, <h1>.
Можно задавать width, height, margin, padding.
2. inline (строчный):
Примеры: <span>, <a>, <strong>.
Нельзя задавать width, height, margin-top/bottom.
3. inline-block:
Сочетает особенности inline и block.
Пример: кнопки (<button> по умолчанию inline-block).
Пример:
.block {
display: block;
width: 200px;
background: red;
}
.inline {
display: inline;
/* width и height не сработают */
}
.inline-block {
display: inline-block;
width: 100px;
height: 50px;
}Вывод:
Выбор display зависит от задачи: верстка блоков, текста или гибридных элементов.