value: inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
initial value: inline/block depending on the User Agent (browser) settings
inherited: no
percentages: N/A
applicable to: all elements

The display property determines which manner the element is displayed. The User Agent, or browser, has set default values for specific elements in regards to how they are displayed.

Below is the list of some possible values for display:

block This value will make the element generate a block box. If set to display: block, the element will start on a new line nand stretch to the left and right to fit the entire width of the containing element minus padding for the containg element.

Common block elements are: <h1>, <h2>, etc, <p>, <ul>, <div>, <header>, <form>, <footer> and <section>
inline-block This value will make the element generate an inline-block container. This means that the element will still set inline with the other text, but you can set a width and height for the element to separate it.

The inline value will make the element generate an inline box. If an element is set to display: inline, the element can be contained within other elements and will set inline with the other surrounding text. You cannot set the width and height of element set to display: inline.

Common inline elements are: <span>, <a>

none This value will cause the element to not be diplayed on the page. Using this setting can affect the layout of the page. If you simply wish to hide the element box, but not affect the layout, use the visibility property.
list-item This value will display the element as a list-item - which means that it will have a bullet in front of it. This does not work properly on all browsers.

display: inline vs display: block

In the first example below you will see how when the <a> tag is set to display: inline (the default value) the display is only of the element itself. In the second example, when <a> is set to display: block, it expands to the width of the containing element.


div.outerwrap {width: 200px; height: 50px; background: #9FB1B3;}
a.testblock {display: inline; background-color: #fffea2}



div.outerwrap {width: 200px; height: 50px; background: #9FB1B3;}
a.testblock {display: block; background-color: #fffea2}