css - 是什么让 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 更改为 absolute 或 float 元素。