Home > DeveloperSection > Blogs > Display property of CSS

Display property of CSS


CSS-CSS3 CSS 
Ratings:
0 Comment(s)
 834  View(s)
Rate this:

Display property of CSS

Hi friends in this blog, I’m explaining about display property of css.

Description:

We can assign one of four possible values for the CSS Display property, which are:

  1. Display: None
  2. Display: Inline
  3. Display: Inline Block
  4. Display: Block



Display: None

A "None" value for the display property does not display the element. That might sound pretty useless but it can be used for good effect with accessibility considerations, alternate style sheets or advanced hover effects.

Example

If we specify display none to the div class "green" then it will not be visible, as in
the following:

 

<style>

    .red {

        background: red;

        height: 100px;

        width: 100px;

        display: inline;

    }

    .green {

        background: green;

        height: 100px;

        width: 100px;

        display: none;

    }

</style>

 

<body>

    <div class="red">

        MindStick Software development pvt. ltd.

    </div>

 

    <div class="green">

        MindStick Software development pvt. ltd.

    </div>

</body>

Output

 

Display: Inline

An "Inline" value for the display property does just what it says; the elements that are displayed inline follow the flow of a line. Strong, anchor, span and emphasis elements are traditionally displayed inline. If we specify the value inline to a block element then it will behave like an inline element.

Example

<style>

    .red {

        background: red;

        height: 100px;

        width: 100px;

        display: inline;

    }

    .green {

        background: green;

        height: 100px;

        width: 100px;

        display: inline;

    }

</style>

 

<body>

 

    <div class="red">

        MindStick Software pvt. ltd.

    </div>

 

    <div class="green">

        MindStick Software pvt. ltd.

    </div>

 

</body>

 

Output

Div (a block element) behaves like an inline element as the display value inline is given to it.

Note:  CSS height and width properties does not work for an inline element.




Display: Inline-Block

Basically, it's a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and padding etc. We can provide an inline-block value for an inline element also.

Example

 

<style>

    .red {

        background: red;

        height: 100px;

        width: 100px;

        display: inline-block;

    }

 

    .green {

        background: green;

        height: 100px;

        width: 100px;

        display: inline-block;

    }

</style>

 

<body>

    <div class="red">

    </div>

 

    <div class="green">

    </div>

</body>

 

 

Output

 

After giving it an inline-block value for the display property to the div, we will see both div in the same line.

Display: Block


Puts a line break before and after the element. Header, Div and paragraph etc. elements are examples of elements that are traditionally displayed in a block format.

Exa
mple

<style>

    .red {

        background: red;

        height: 100px;

        width: 100px;

    }

 

    .green {

        background: green;

        height: 100px;

        width: 100px;

    }

</style>

 

<body>

 

    <div class="red">

    </div>

 

    <div class="green">

    </div>

 

</body>

 

Output

 

<div> is a block element so it covers horizontal space of its parent element.

in my next post i'll explain about Create Simple Lightbox in javaScript and CSS


Don't want to miss updates? Please click the below button!

Follow MindStick