CSS Property display

display defines the kind of display box an element generates.

A block element uses the full width available, and has a line break before and after it. Examples of block elements:

<h1>
<p>
<div>

An inline element only uses as much width as necessary, and does not force line breaks. Examples of inline elements:

<span>
<a>

The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden.

We can change an inline element to a block element, or vice versa. The following example displays list items as inline elements:

li {display:inline;}

The following example displays span elements as block elements:

span {display:block;}

We can hide an element by display:none or by visibility:hidden.

visibility:hidden hides an element, but the element still uses the space. The element is hidden, but it affects the layout.

display:none hides an element, and it will not use any space. The element is hidden, and the page is displayed as if the element doesn't exist.

Summary

Item	Value
Initial value	inline
Inherited	No.
Version	CSS1
JavaScript syntax	object.style.display="inline"
Applies to	All elements.

CSS Syntax

display: inline | 
         block | 
         list-item | 
         run-in | 
         inline-block | 
         inline-flex |
         inline-table |
         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

Property Values

The property values are listed in the following table.

Value	Description
none	Not showing the element
box	displayed as a block-level flex container box
flex-box	displayed as a block-level flex container box
block	displayed as a block-level element like paragraphs
flex	displayed as a block-level flex container box
inline	Default value. displayed as an inline-level element like span
inline-block	placed as an inline element on the same line as adjacent content, but it behaves as a block element
inline-flex	displayed as an inline-level flex container box
inline-table	displayed as an inline-level table
list-item	displayed as a list-item
table	displayed as a table
table-caption	displayed as a table caption
table-cell	displayed as a table cell
table-column	displayed as a table column
table-column-group	displayed as a table column group like
table-footer-group	displayed as a table footer row group
table-header-group	displayed as a table header row group
table-row	displayed as a table row
table-row-group	displayed as a table row group
inherit	Inherit the display property from the parent element

Browser compatibility


`display`	Yes	Yes	Yes	Yes	Yes

Example

An example showing how to use display CSS property.

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            h1, h2, h3, h4, h5, h6 {<!-- w  ww. j a  va2  s.  co  m-->
              display: inline;
              margin: 0;
              font-weight: normal;
            }        
        </style>
    </head>
    <body>
         <div>
        <h1>&lt;h1&gt;</h1>
         <span>span</span>
         </div>
    </body>
</html>

Click to view the demo

Example 2

You create CSS table layouts by using the display property. The values that relate to this feature are described in the following table.

Value	Description
table	Behaves like the table element.
inline-table	Behaves like the table element, but creates an inline-level element.
table-caption	Behaves like the caption element.
table-column	Behaves like the col element.
table-column-group	Behaves like the colgroup element.
table-header-group	Behaves like the thead element.
table-row-group	Behaves like the tbody element.
table-footer-group	Behaves like the tfoot element.
table-row	Behaves like the tr element.
table-cell	Behaves like the td element.

<!DOCTYPE HTML> 
<html> 
    <head> 
        <style> 
            #table { <!--from   ww w  .  ja  va 2 s  . c o  m-->
                display: table; 
            } 
            div.row { 
                display: table-row; 
                background-color: lightgray; 
            } 
            p { 
                display: table-cell; 
                border: thin solid black; 
                padding: 15px; 
                margin: 15px; 
            } 
            img { 
                float:left; 
            } 
        </style> 
    </head> 
    <body> 
        <div id="table"> 
            <div class="row"> 
                <p> 
            HyperText Markup Language (HTML) is the main markup language for 
            displaying web pages and other information that can be displayed 
            in a web browser(From From Wikipedia, the free encyclopedia).
                </p> 
                <p> 
            HyperText Markup Language (HTML) is the main markup language for 
            displaying web pages and other information that can be displayed 
            in a web browser(From From Wikipedia, the free encyclopedia).
                </p> 
                <p> 
            HyperText Markup Language (HTML) is the main markup language for 
            displaying web pages and other information that can be displayed 
            in a web browser(From From Wikipedia, the free encyclopedia).
                </p> 
            </div> 
            <div class="row"> 
                <p> 
                    This is big. <img src="http://java2s.com/style/download.png" alt="big"/> 
                </p> 
                <p> 
                    This is small. <img src="http://java2s.com/style/download.png" alt="small"/> 
                </p> 
                <p> 
                    No picture here 
                </p> 
            </div> 
        </div> 
    </body> 
</html>

Click to view the demo