CSS Display Property

CSS Display property is used to sets an element as block or inline in normal document flow. Display property can also change display of an HTML Element, like from block to inline and inline to block etc.

By default, the initial value of display for all html elements is inline. User Agent stylesheet ( CSS given by browser ) change the behavior from inline to block, table, inline-block, none etc and thus all html elements behaves differently.

We can use display to build layout as normal document flow, flexbox or grid.

Change CSS Display


Block

Block

Block

Block


Display Inline

Display inline is default display property of <a>, <img>, <span>, <b>, <i>, <s>, etc. These elements occupy space of content only and does not break line. Inline elements of text type (a, span, b, i, strong, em, small) doesn't support width property. But image and iframe can support width as they are not text elements.

Properties of inline Elements

  • Occupy width of content only .
  • Need <br> to break line.
  • Allow padding and margin of left and right side only.
  • Width and Height are not supported.
  • Can have only inline elements as child element( except hyperlink).

Inline VS Block elements

This is a span Link

This is a paragraph

This is a div


<style>
    span,a{ background:blue;}
    div,p{ background:yellow}
</style>

<span>This is a span</span>             <!--  Inline element-->
<a href="#">Link</a>                    <!--  Inline element-->

<p>This is a paragraph</p>              <!--  Block element--> 
<div>This is a div</div>                <!--  Block element--> 
						

Display inline For list

  • List 1
  • List 2
  • List 3
  • List 4

<style>
.list1{ padding:0}
.list1 li{ 
    display:inline; 
    background:#99f;
    }
</style>

<ul class="list1">             
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li>List 4</li>
</ul>                         
						

Inline Block

Display inline block works same like display inline, but inline-block elements can have width and height. We can also add padding in inline-block elements.

  • List 1
  • List 1
  • List 2
  • List 3
  • List 4

<style>
.list2{ padding:0;}
.list2 li{ 
    display:inline-block; 
    width:100px; 
    background:#fcc;
    padding: 6px 10px;
    }
</style>

<ul class="list2">             
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li>List 4</li>
</ul>     

Display Inline Vs Inline Block

Inline and inline-block works almost same. Both allow other inline or inline block elements to come next to them. Here is a quick difference between display inline and inline block.

Difference between display inline and inline block
Property Display Inline Display Inline Block
Padding left and right only all four sides
Margin left and right only all four sides
width not allowed allowed
Height not allowed allowed

Display Block

Display Block allow inline elements to behave like block Elements. <div>, <h1> to <h6>, <p>, <address>, <pre>, <ul>, <ol>, <hr> all are block level elements. HTML Block elements can have both inline level and block level as child.

Properties of block elements

  • Occupy Full width ( 100% ) of the parent element.
  • Starts from a new row
  • Next element will come in next row.
  • can have both inline and block elements as child.

Convert inline elements to block.

Link 5 Link 6 Link 7 Link 8

<style>
a{ 
    display:block;
    background:#f99;
}	
</style>	

<a href="#">Link 5</a>             
<a href="#">Link 6</a>                   
<a href="#">Link 7</a>             
<a href="#">Link 8</a>
				

List Item

Display List Item is default display of <li> elements. All li elements shows bullets or numbering, based on list type ( unordered or ordered ).

Paragraph as list item

Paragraph as list item

Paragraph as list item

Paragraph as list item


<style>
p{ 
    display:list-item;
    background:#f99;
}	
</style>	
    
    <p>Paragraph as list item</p>                       
    <p>Paragraph as list item</p>                       
    <p>Paragraph as list item</p>                       
    <p>Paragraph as list item</p>                       
            

Display Table

Display Table is default display of <table> element. Display Table allow next element to starts from next row, but occupy width of content only. See example

Div One
Div Two
Div Three
Div Four

<style>
.table{ 
    display:table;
    background:#f99;
}	
</style>

<div class="table">Div as table</div>
<div class="table">Div as table</div>
<div class="table">Div as table</div>
<div class="table">Div as table</div>

Display Inline Table

Display Inline table is used to inline table element.

Div as inline table
Div as inline table
Div as inline table
Div as inline table

<style>
.inline-table{ 
    display:inline-table;
    background:#f99;
}	
</style>

<div class="inline-table">Div as inline table</div>
<div class="inline-table">Div as inline table</div>
<div class="inline-table">Div as inline table</div>
<div class="inline-table">Div as inline table</div>

Display NONE

Display none hide an html element from user. Thus it doesn't occupy any space. We can change display of these elements on hover of parent element.

Display None Example.

This paragraph in visible

<!--This para is not visible as its display is none-->

<style>
.hidden-text{ display:none}
</style>

    <p>This paragraph in visible</p>
    <p class="hidden-text">This paragraph in hidden</p>


Display None and Visibility hidden.

Visibility hidden only hide the content, but will occupy the space. But in display none, element hides and doesn't occupy any space.


For Display Flex and Grid based layout in css3, click link below.

CSS Display Flex

CSS Grids