Geek Answers Handbook

What does the voting buttons in StackOverflow do on different lines?

Voting buttons only have an img tag, a span tag, and another img tag. When I try them on a new page, they go on one line. Which CSS element calls them 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"/> <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"/>
+4
source share
2 answers

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

Elements that display:block by default occupy all the space from left to right and save their own line, and also click other elements on the next line. Even if a width is applied that limits their size, they will still remain on a separate line unless you change the position element to absolute or float .

+10
source

display:block;

Block-level elements are those elements of the original document that are rendered as blocks (for example, paragraphs). Several values ​​of the display property display the block-level element: "block", "list-item" and "run-in" (part of the time, see launching the box) and "table".

Block level elements (except for displaying "tables", which are described in a later chapter) is a block of the main block, which contains either only block boxes or only built-in boxes. The main unit block sets the contained block for the descendant box and the generated content and is also a field involved in any positioning scheme. The main block boxes are involved in the formatting block.

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

+2
source

More articles:


All Articles