投票按钮只有一个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"/>
答案 0 :(得分：10)
他们正在将display:block应用于所有三个项目。这很重要，因为默认情况下img和span元素是内嵌，与 block p和div标记不同>默认情况下的元素。
默认情况下display:block的元素从左到右占据整个空间，并将自己保持在自己的行上，并将其他元素推送到下一行。即使应用了限制其大小的宽度，除非您将position更改为绝对或float元素，否则它们仍将保留在自己的行中。
答案 1 :(得分：2)
display:block;
块级元素就是那些 源文件的元素 视觉格式化为块 （例如，段落）。几个值 'display'属性构成一个元素 块级：'block'，'list-item'和 '磨合'（部分时间;参见磨合 盒子）和'桌子'。
块级元素（除了 显示'table'元素，它们是 在后面的章节中描述）生成 包含的主要块框 要么只是阻止框，要么只是内联 框。主要区块框 建立包含块 后代框和生成的内容 并且也是任何参与的盒子 定位方案。主要块 盒子参加一个街区 格式化上下文。