Display inline, inline-block, block in CSS

Taimoor Sattar
Display property in CSS specifies the display property of the HTML element. Display in CSS defines how we generate boxes.
  • display => none
  • display => inline;
  • display => block;
  • display => inline-block;
Display as none means hides the HTML element. Display as inline means height and width properties will have no effect block which is at its default value. Display as block means HTML element takes full width. Display as inline-block means HTML tag is solid and not breakable like click button so that full text appears on one line. In CSS Display properties are defined as
display: inline;
display: inline-block;
display: block;
In HTML, DIV element is an example of a display as block. while SPAN element is an example inline display in CSS
<p>This is a <div>DIV HTML ELEMENT</div> which takes full width</p>
<p>This is a <span>SPAN HTML ELEMENT</span> which takes dafault width</p>