Role of Display Property in CSS

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.