What makes the vote buttons in StackOverflow be on different lines?

Question

The vote buttons just have an img tag, span tag, and another img tag. When I try these out in a fresh page, they come out on the same line. What CSS element exactly is causing them to be on different lines?

<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"/&gt;
<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"/&gt;

Answer 1

display:block;

Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). Several values of the 'display' property make an element block-level: 'block', 'list-item', and 'run-in' (part of the time; see run-in boxes), and 'table'.

Block-level elements (except for display 'table' elements, which are described in a later chapter) generate a principal block box that contains either only block boxes or only inline boxes. The principal block box establishes the containing block for descendant boxes and generated content and is also the box involved in any positioning scheme. Principal block boxes participate in a block formatting context.

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

Answer 2

They are applying display:block to all three items. This is important because img and span elements are inline by default, unlike p and div tags which are block elements by default.

Elements that are display:block by default take up the whole space left to right, and keep themselves on their own line as well as pushing other elements to the next line. Even if a width is applied that limits their size, they will still remain on their own line unless you change the position to absolute or float the element.