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

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

ValueDescription
tableBehaves like the table element.
inline-tableBehaves like the table element, but creates an inline-level element.
table-captionBehaves like the caption element.
table-columnBehaves like the col element.
table-column-groupBehaves like the colgroup element.
table-header-groupBehaves like the thead element.
table-row-groupBehaves like the tbody element.
table-footer-groupBehaves like the tfoot element.
table-rowBehaves like the tr element.
table-cellBehaves 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