Geek Answers Handbook

CSS: differences in display properties

What is the difference between a display: a block and a display: inline

+5
source share
9 answers

Block elements are usually stacked vertically, while linear elements are aligned horizontally.

Two Divs will stack on top of each other, but if you set them to display: inline, they will be next to each other horizontally. Vise-versa with Span tags.

+6
source

display: block
will cause the object to force other objects in the container to a new line.

display: inline
tries to display an object on the same line as other objects.

display: unit

Item 1 
Item 2 
Item 3

Display: Built-in

Item 1 Item 2 Item 3
+11
source

,

display: block , : <p>

display: make inline.

, .

* none - no display at all.
* inline - An inline box.
* block - A block box.
* inline-block - effectively a block box inside an inline box. Not supported by Mozilla at time of writing. IE will only apply inline-block to elements that are traditionally inline such as span or a but not p or div. Loopy.
* run-in - Either an inline or block box depending on the context. If a block box follows the run-in box, the run-in box becomes the first inline box of that block box, otherwise it becomes a block box itself. Crazy. Not supported by IE/Win or Mozilla at the time of writing.
* list-item - the equivalent of the default styling of the HTML li element.
* table - a block-level table - the equivalent of the default styling of the HTML table element. Not supported by IE.
* inline-table - an inline-level table. Not supported by IE.
* table-row-group - the equivalent of the default styling of the HTML tbody element. Not supported by IE.
* table-header-group - the equivalent of the default styling of the HTML thead element. Not supported by IE.
* table-footer-group - the equivalent of the default styling of the HTML tfoot element. Not supported by IE.
* table-row - the equivalent of the default styling of the HTML tr element. Not supported by IE.
* table-column-group - the equivalent of the default styling of the HTML colgroup element. Not supported by IE.
* table-column - the equivalent of the default styling of the HTML col element. Not supported by IE.
* table-cell - the equivalent of the default styling of the HTML td or th elements. Not supported by IE.
* table-caption - the equivalent of the default styling of the HTML caption element. Not supported by IE.

*

+4

display: block , , . HTML , , (, ). display: inline , , . " ", , , .

+3

CSS , . , display: block, . , display: inline .

, , . , , .

, , inline , , , .

, display: table, - / .

CSS 2.1.

+1

, , (margin/padding top/bottom).

( ), float. . , , float, .

+1

, . Inline , .

0

HTML- , HTML, .

( ) . : div, p, table.

( ), . : span, code, a.

0
display: block

. .

display: inline-block

, , . .

Usage example: when creating a menu bar on top of your page (often wrapping menu items is used display: inline-block)

0
source

More articles:


All Articles