Что делает кнопки голосования в StackOverflow на разных строках?

Question

Кнопки голосования имеют только тег img, тег span и другой тег img. Когда я пробую это на новой странице, они выходят в одной строке. Какой именно элемент CSS заставляет их находиться в разных строках?

<img class="vote-up" width="40" height="25" title="This question is useful and clear (click again to undo)" alt="vote up" src="http://sstatic.net/so/img/vote-arrow-up.png"/>
<span class="vote-count-post" title="View upvote and downvote totals" style="cursor: pointer;"> 0 </span>
<img class="vote-down" width="40" height="25" title="This question is unclear or not useful (click again to undo)" alt="vote down" src="http://sstatic.net/so/img/vote-arrow-down.png"/>

Answer 1

Они применяют display:block ко всем трем пунктам.Это важно, поскольку элементы img и span по умолчанию inline , в отличие от тегов p и div, которые по умолчанию являются элементами block .* Элементы, которые по умолчанию display:block, занимают все пространство слева направо и остаются на своей собственной линии, а также перемещают другие элементы на следующую строку.Даже если применяется ширина, ограничивающая их размер, они все равно останутся на собственной линии, если вы не измените position на абсолютный или float элемент.

Answer 2

display:block;

Это элементы уровня блока элементы исходного документа, отформатированы визуально как блоки (например, параграфы). Несколько значений свойство display отображает элемент уровень блока: «блок», «элемент списка» и 'обкатка' (часть времени; см. обкатку коробки) и «таблица».

Элементы уровня блока (кроме отображать элементы таблицы, которые описано в следующей главе) генерировать блок основного блока, который содержит либо только блок-боксы, либо только встроенные коробки. Блок основного блока устанавливает содержащий блок для потомки и сгенерированный контент а также коробка участвует в любом схема позиционирования. Основной блок боксы участвуют в блоке контекст форматирования.

http://www.w3.org/TR/CSS21/visuren.html