display - HTML CSS CSS Property

HTML CSS examples for CSS Property:display

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. display

Description

The display CSS property sets the type of element box.

The following table summarizes the display Property.

Item Value
Default value: inline
Applies to:All elements
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


display:      block | 
              inline | 
              inline-block | 
              list-item | 
              run-in | 
              table | 
              table-caption | 
              table-cell | 
              table-column | 
              table-column-group | 
              table-footer-group | 
              table-header-group | 
              table-row | 
              table-row-group | 
              none | 
              initial | 
              inherit

Property Values

The following table describes the values of this property.

Value Description
none Set child elements' display property to none.
block display as a block element box.
inline display as one or more inline element boxes.
list-item display as a separate list-item inline box for the list marker.
inline-block display as if it were an inline box.
table display as <table> HTML element.
inline-table display as a table in an inline box.
table-caption display as <caption> HTML element.
table-column display as <col> HTML elements.
table-column-group display as <colgroup> HTML elements.
table-header-group display as <thead> HTML elements.
table-row-groupdisplay as <tbody> HTML elements.
table-footer-group display as <tfoot> HTML elements.
table-row display as <tr> HTML elements.
table-cell display as <td> HTML elements.
run-in display as either a block box or an inline box, depending on the context.
initialSets this property to its default value.
inherittake the value of its parent element display property.

The example below shows the display property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS display property</title>
  <style type="text/css">
    div {<!--  w w w  .j a va2 s .  c  o m-->
      display: inline;
    }
    span {
      display: block;
    }
    </style>
 </head>
 <body>
  <div>
   These
   <code>div</code> elements generates an
   <div>
    inline
   </div> box.
  </div>
  <p>This <code>span</code> element generates a <span>block</span> box.</p>
 </body>
</html>

Related Tutorials