CSS Display

CSS Display property shows how and html element behaves. 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 form inline to block, table, inline-block, none etc and thus all html behaves different.

CSS Display properties

PropertyUse
InlineDisplay elements as inline level elements. For Exp <a>, <img>, <span>, <b>, <i>, <tt>, <etc>.
Inline-blockDisplay elements as inline block level elements. For Exp <button>, <input> etc.
list-itemDisplay elements as list item. by default only li tag is having display list-item.
BlockDisplay elements as block level element. For Exp div, p, h1, h2, h3, h4, h5, h6 etc.
NoneDo not display that element on screen.
TableDisplay elements as table .
Inline-tableDisplay elements as inline level table .
InheritInherit property of parent.
InitialLoad its Default property.

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. But image and iframe supports.

Properties of inline Elements

  • Occupy width of content only .
  • Need <br> to break line.
  • Can have only inline elements as child element( except a tag).

Inline and Block element behaviour.


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

This is a span Link

This is a paragraph

This is a div

See the default display property of <span>, <a> is inline, and for <p>, and <div> is block.

Display Block to inline

  • List 1
  • List 2
  • List 3
  • List 4
  • List 5
  • List 6
  • List 7
  • List 8

Para 1

Para 2

Para 3

Para 4

Para 5

Para 6


<style>
    .list1 li{ display:list-item}       /*Default display of li elements*/
    .list2 li{ display:inline}
    
    p{ display:block}                   /*Defauly display of p element*/
    .text-inline{ display:inline}
</style>

    <ul class="list1">             <!--List with display list-item-->
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
    </ul>                         
    
    <ul class="list2">        <!--List with display inline-->
        <li>List 5</li>
        <li>List 6</li>
        <li>List 7</li>
        <li>List 8</li>
    </ul>
	
	<p>Para 1</p>
	<p>Para 2</p>
	<p>Para 3</p>

	<p class="text-inline">Para 4</p>
	<p class="text-inline">Para 5</p>
	<p class="text-inline">Para 6</p>
						

Display Block

Display Block allow inline elements to behave like block Elements. Div, 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 tag.
  • No need to add <br> to break line.
  • can have both inline and block elements as child.

Convert inline elements to block.

( Anchors with display inline )

Link 1 Link 2 Link 3 Link 4

( Anchors with display block )

Link 5 Link 6 Link 7 Link 8

    <a href="#">Link 1</a>             
    <a href="#">Link 2</a>                   
    <a href="#">Link 3</a>             
    <a href="#">Link 4</a>
	
    <a style="display:block" href="#">Link 5</a>             
    <a style="display:block" href="#">Link 6</a>                   
    <a style="display:block" href="#">Link 7</a>             
    <a style="display:block" href="#">Link 8</a>
				

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.

(Browser view)

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>

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