Display property of CSS is mostly used to change the layout of element. It Control the type of box that an element Generates. And all the HTML elements have a default display. Following are the display types

  • Block
  • inline
  • inline-block
  • none

These are the mostly used Display types but there are some more (table, table-caption, table-cell, table-column, table-row,inline-table,List-item, run-in). But we will describe only most used Display Types.

none

This property will turn off the display of an element. No Box will be generated for element. This value is used when we want to hide an element. Element always make a Box when its display is other than none. visibility:hidden keeps the box but display:none hide the box.And is shown as
div{
display:none;
}

block
The property makes an element to occupy space which start with a line break and end with a line break.Mean a block box element hold the full width. and it is shown as
div{
display:block;
}

Block box element allow to manipulate height,width,margin and padding of element. Many HTML elements are display:block; by default. For Example div,headings(h1-h6) and Paragraph(p).

inline
It is used to display a content within a line without any line break as in block.it is shown as
div{
display:inline;
}

Now div will occupy only that space which its content hold.If an element have display inline then it will be shown right after the previous element. span,a and i are by default HTML inline elements.

inline-block

Element have block properties but Behave like a inline mean element hold position like inline without a line break and we can assign margin, padding, width and height which a block element have but inline not.e.g
div{
display:inline-block;
}

Now div will position in same line but it have behavior of block.I’m aware of no standard HTML elements with a default display of display:inline-block;.

Other display Properties

There are more values that can be assigned to the CSS display property.Here’s a list of CSS display properties not covered in this article.

display Value Usage
flex New in CSS3. See Exact Centering With Flex for an example of use.)
inline-flex New in CSS3. To display an element as an inline-level flex container.
inline-table To display a container element as an inline-level table.
list-item To make the container element’s display behave like a li list element
run-in To make the container element display depend on context, either block or inline
table-caption To make the container element’s display behave like a caption element of a table
table-column-group To make the container element’s display behave like a colgroup element of a table
table-header-group To make the container element’s display behave like a thead element of a table
table-footer-group To make the container element’s display behave like a tfoot element of a table
table-row-group To make the container element’s display behave like a tbody element of a table
inherit To make the element’s value is the same as the parent element’s value. (The parent element is the element containing this element.)
initial To set the element’s display value to default.