CSS: Display differences

Question

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

Answer 1

Block elements will typically stack vertically whereas inline elements will line up 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.

Answer 2

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

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

display:block

Item 1 
Item 2 
Item 3

display:inline

Item 1 Item 2 Item 3

Answer 3

display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance). display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.

Answer 4

Block uses the full width available, with a new line before and after. Inline uses only the width it needs without forcing new lines.

Answer 5

yes,

display:block makes the element behave like a block eg: <p>

display:inline make and element layout inline.

these can be applied to elements that default to the opposite display type.

Possible Values

* 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.

*source

Answer 6

There are two main types of drawing context in CSS that can be assigned to elements. One, display: block, creates positionable boxes. The other, display: inline flows the content as a series of lines within a box.

By default, a block takes up all horizontal space, so a series of blocks will be displayed one beneath the other, stacked vertically. As inline elements flow into lines, they are rendered horizontally, as one word after the other.

In general, you use block to lay out a page, while inline is reserved for textual content that you find within chunks of text, for instance, links.

There are also other types of drawing context, for instance, display: table, however these are more rarely used due to their specialised nature and/or lack of browser support.

More detail is available in the CSS 2.1 specification.

Answer 7

It's important to note that inline elements cannot be assigned their own width, height, or vertical whitespace (margin/padding top/bottom).

If you are trying to make block elements behave like inline elements (where they stack next to each other), you should be using float. Floats will stack next to other floats in the same direction. Also, any inline element that is given float will automatically be given become a block.

Answer 8

An HTML document is considered a flow, think of a stack of HTML elements piled up to the top.

A block is defined in the flow as a box (by default as large as the page) and is pushed as much as possible to the top without overlapping another block. Examples: div, p, table.

An inline element does not define a box (that's why you cannot set its width and height), it will be appended to other inline elements in the current block. Examples: span, code, a.