Как background ведёт себя у элементов без контента?

Question

Background отображается только в пределах размеров элемента. Если у элемента нет контента и не задан размер, фон не будет виден. У блочных элементов без контента высота равна нулю. Background становится заметным только при наличии размеров, padding или border. Это важно учитывать при вёрстке.

YeaHub · Accepted Answer

Поведение background напрямую связано с тем, имеет ли элемент физические размеры.Основной принципФон отрисовывается внутри box-модели элемента:contentpaddingborderЕсли content отсутствует и размеры равны нулю, фон не отображается.Блочные элементы без контентаЕсли у div:нет текстане задан heightотсутствует paddingто его высота равна нулю, и background визуально не виден.Как сделать background видимымФон можно отобразить, если:задать height или min-heightдобавить paddingдобавить borderпоместить внутрь контентInline-элементыУ строчных элементов фон рисуется вокруг текста и padding, даже если контента мало.Краткий выводBackground отображается только в пределах размеров элемента, поэтому без контента или размеров фон может быть невидим.