Display

In this chapter we will learn about CSS display property.

Every element has a default display value depending on what type of element it is. The default for most elements is usually block or inline. A block element is often called a block-level element. An inline element is always just called an inline element.

An inline element will not accept height and width properies. It will just ignore it.

The display property defines type of the box which is used for an HTML element.

With the display property we can override the inital value of an element. For example, a block-level element could be displayed as an inline element by specifying a value of inline.

In HTML, default display property values are taken from behaviors which are described in the HTML specifications or from the browser or user default stylesheet. On the other hand, the default value in XML is inline.

CSS Syntax

display: value;

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
       <title>Title of the document</title>
       <style>                    
           .display li{   	
               display:inline;
	       margin-right:10px;
           }
       </style>
   </head>
   <body>
	      
	<h2>List item with initial value.</h2>

        <ul>
           <li>List iteam</li>
  	   <li>List iteam</li>
        </ul>

	<h2>List item when using display property.</h2>

        <ul class="display">
           <li>List iteam 1</li>
  	   <li>List iteam 2</li>
        </ul>
              
   </body>
</html>

Let's see an example with inline element:

<!DOCTYPE html>
<html>
   <head>
       <title>Title of the document</title>
       <style>  
           .inline{
               border:1px solid #cccccc;   	
               height:20px;
               width:250px;
           }                  
           .block{
               border:1px solid #cccccc;   	
               display:block;
               height:20px;
               width:250px;
           }
       </style>
   </head>
   <body>
	      
	<h2>List item with initial value.</h2>

        <span> This is some text.</span>
        <span class="inline"> This is another text.</span>

	<h2>List item when using display property.</h2>

       <span class="block"> This is some text.</span>
       <span class="block"> This is another text.</span>
              
   </body>
</html>

Property Values

Value Descriptions
inline It displays an element as an inline element. It is the default value of this property.
block It displays an element as a block element.
flex It displays an element as a block-level-flex container.
inline-block It displays an element as an inline-level block container.
inline-flex It displays an element as an inline-level flex container.
inline-table It displays an element as an inline-level table. It behaves like a HTML <table> element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context.
list-item It makes the element behave like HTML li element.
run-in It displays an element as block or inline according to context.
table It makes the element behave like HTML <table> element.
table-caption It makes the element behave like HTML <caption> element.
table-column-group It makes the element behave like HTML <colgroup> element.
table-header-group It makes the element behave like HTML <thead> element.
table-footer-group It makes the element behave like HTML <tfoot> element.
table-row-group It makes the element behave like HTML <tbody> element.
table-cell It makes the element behave like HTML <td> element.
table-column It makes the element behave like HTML <col> element.
table-row It makes the element behave like HTML <tr> element.
none It means that the element won't be shown at all.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.