CSS Display Properties – Difference between display inline , display inline block and display block

On a webpage every element is a rectangle block having some width and height and css display property recognize how the block will behave?

The display property is supported in all major browsers. It is CSS’s most widley used property for controlling webpage layouts. Every element has a default display value depending on what type of element it is. The default for most elements is usually block or inline. A block element is often called a block-level element. An inline element is always just called an inline element.

div {
  display: inline;        
  display: inline-block;  
  display: block;         
  display: none;         
}

Display Inline – Its the default value for the elements like span , em, b , a etc . Inline means element displays in a line. An inline element can wrap some text inside a paragraph like this without disrupting the flow of that paragraph. The a element is the most common inline element, since you use them for links.

Display inline-block – Display inline block placed like display inline but behaves like display block. the major difference between both is we can set width for display inline block.

Display block – Display block means that the element is displayed as a block, Divs, header, footer, sections, paragraphs are block level elements. A block has some whitespace above and below it but no elements next to it, except when ordered by float property. Block level elements always start form new line and takes full width as much they can.

Display None – display none hides the div element from the page. We can not see the elements or its child elements.