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:

Display: None
Display: Inline
Display: Inline Block
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 inthe following:

<style>
    .red {
        background: red;
        height: 100px;
        width: 100px;
        display: inline;
    }
    .green {
        background: green;
        height: 100px;
        width: 100px;
        display: none;
    }
</style>
 
<body>
    <divclass="red">
        MindStick Software development pvt. ltd.
    </div>
 
    <divclass="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>
 
    <divclass="red">
        MindStick Software pvt. ltd.
    </div>
 
    <divclass="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>
    <divclass="red">
    </div>
 
    <divclass="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.

Example

<style>
    .red {
        background: red;
        height: 100px;
        width: 100px;
    }
 
    .green {
        background: green;
        height: 100px;
        width: 100px;
    }
</style>
 
<body>
 
    <divclass="red">
    </div>
 
    <divclass="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

css

Updated 14-Nov-2014

blog

Display property of CSS

Description:

Display: None

Example

Display: Inline

Example

Example

Display: Block

Example

Anonymous User

Leave Comment

Comments

Liked By