ширина и высота для диапазона не отображаются, если текст не введен

Question

У меня есть <span id="some"></span>, а css -

#some{
      background-color:#000; width:150px; height:50px; 
}

Ширина и высота не отображаются, если что-то не введено. Как я могу это исправить?

Answer 1

span - это встроенный элемент, поэтому, не сообщая браузеру, что его свойство display как block не сработает, вы не сможете его выполнить.

Надеюсь, это поможет, Синан

Answer 2

Вы не можете указать высоту / ширину для встроенного элемента, он имеет размер по своему содержанию, но вы можете указать display: inline-block; следующим образом:

#some{
  background-color:#000; width:150px; height:50px; display: inline-block;
}​

См. Пример здесь , обратите внимание, что IE7, в частности, не справится с этим в некоторых ситуациях, поэтому display: block; будет работать там (но, если честно, почему бы тогда просто не использовать <div>?) ... но имейте в виду, что inline-block находится в потоке, тогда как block отбрасывает все вниз по линии.

Answer 3

Можно настроить ширину и высоту пролета, даже не устанавливая отображение в виде блока, установив абсолютное значение значения позиции.

.green-box{
      background-color:gold; 
      position:absolute;
      width:300px;
      height:100px;
      border: 2px solid silver;
}

Проверьте эту ссылку больше: = https://jsfiddle.net/vipingoyal1000/oa2ssb19/

Answer 4

Использование дисплея: блок; это будет отлично работать.

Спасибо Rex

Answer 5

Поскольку все остальные упомянутые span являются встроенными, вам нужно либо сделать их блочным элементом (используя display: block), либо использовать вместо них блочный элемент (div).Чтобы лучше понять встроенные и блочные элементы, а также всю модель рендеринга html / css, я предлагаю вам прочитать http://www.w3.org/TR/CSS2/visuren.html.

Answer 6

Распространенным решением является использование в теге span.(Полагаю, вы тоже хотите сделать это display:block;?)