CSS Display

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

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.

Inline VS Block elements

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

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.

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

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.

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

<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

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

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

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

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