---
title: "Display property of CSS"
description: "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 pr"
author: "Anonymous User"
published: 2014-11-14
updated: 2014-11-14
canonical: https://www.mindstick.com/blog/704/display-property-of-css
category: "css-css3"
tags: ["css"]
reading_time: 3 minutes
---
# 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](https://www.mindstick.com/forum/23337/hibernate-hbm2ddl-auto-possible-values-and-what-they-do) 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](https://www.mindstick.com/blog/304975/why-image-alt-text-matters-for-seo-and-accessibility) considerations, alternate [style sheets](https://www.mindstick.com/forum/506/why-do-we-use-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:
```
MindStick Software development pvt. ltd.
MindStick Software development pvt. ltd.
```
## 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
```
MindStick Software pvt. ltd.
MindStick Software pvt. ltd.
```
## Output
****
Div (a block element) behaves like an inline element as the display value inline is given to it.
Note: CSS [height and width](https://www.mindstick.com/forum/158660/what-is-the-css-property-used-to-specify-the-height-and-width-of-an-element) 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](https://www.mindstick.com/interview/490/explain-the-concepts-and-capabilities-of-assembly-in-dot-net) such as setting [width and height](https://www.mindstick.com/forum/158680/what-css-property-is-used-to-set-the-width-and-height-of-an-element), top and bottom margins and padding etc. We can provide an inline-block value for an inline element also.
\
##### Example
```
```
## 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
```
```
## Output
****
is a block element so it covers horizontal space of its [parent element](https://www.mindstick.com/forum/156679/select-any-parent-element-of-any-tag-via-jquery).
in my next post i'll explain about Create [Simple Lightbox in javaScript and CSS](https://www.mindstick.com/blog/705/Create%20Simple%20Lightbox%20in%20javaScript%20and%20CSS#.VPabxPmUdz8)
---
Original Source: https://www.mindstick.com/blog/704/display-property-of-css
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.