css: min-width и min-height не работают для span?

Question

Я пытаюсь заставить секцию <span> на определенную ширину и высоту. Насколько я понимаю, css min-width и min-height должны позаботиться об этом.

Однако это не работает: Пример из жизни

Я также пытался добавить свойства css, такие как height:100% или min-height:100% для body и / или html и / или тега <span>, как это предлагалось в других ответах на аналогичные вопросы, или с использованием <div> вместо <span>, или с использованием display:block или display:inline-block, но, похоже, ничего из этого не решило проблему.

Answer 1

Вы должны установить display:inline-block или display:block для диапазона.Потому что span имеет display:inline по умолчанию.Невозможно установить height или width для inline элементов.

#test {
  display:inline-block;
  min-width: 300px;
  min-height: 100px;
  background-color: #fa0;
}

<span id='test'>Hello</span>

Answer 2

Нельзя использовать высоту и ширину для встроенных элементов. Используйте div вместо тега span или используйте тег span внутри элемента div.