CSS Display: The CSS Display property is one of an essential property among all other properties of CSS. The display property specifies how the HTML elements should be displayed on the page.

All the elements of HTML contain a display value as the default value. It leans on the element type, which we use. The inline and block values are used for most of the elements.

Default properties of CSS display

  • version: css1
  • inherited: no
  • animation supporting: no
  • default value: inline
  • javascript syntax: object.style.display=”none”

Display Values

Some commonly used display values are as below:

  1. display: none;
  2. display: inline;
  3. display: block;
  4. display: inline-block;
  5. display: run-in;

Display none

The display none value is used to remove the HTML elements from web pages. They will not hold any space. These elements are generally applied with JavaScript language to show and hide the elements without recreating and deleting them.

CSS Display

Display inline

The display inline holds only the width as much as required. These types of elements do not begin on the new line. Hence, the flow of text does not break.

Some inline elements can be as follows:

  • <a>
  • <b>
  • <img>
  • <span>

Example:

CSS Display

Display block

The display block always begins on the new line. It holds-up the entire available width (stretches out towards left and right as much as these elements can). A display block element is a <div> element.

Some examples of display block elements are as below:

  • <div>
  • <p>
  • <form>
  • <section>
  • <footer>
  • <header>
  • <h1> – <h6>

 Example:

CSS Display

Display Inline-Block

The inline-block CSS elements are quite similar to the inline elements. The main difference between the both is that we can set the height and width in inline-block element.

Example:

CSS Display

Display run-in

The display run-in elements can’t work with Mozilla Firefox. They don’t generate a particular box.

  • If a run-in box includes the block box, it will be similar as block.
  • If a block box pursues a run-in box, it will be the block box’s initial inline box.
  • If inline box pursues a run-in box, it will become the block box.

Example:

CSS Display

Other Display Values of CSS

Property-value Description
flex It is applied to show a tag as a container of block-level flex. Flex is a new value in CCS3.
Inline-flex It is applied to show a tag as a container of inline-level flex. Inline-flex is a new value in CCS3.
Inline-table It shows a tag as a table in the inline-table.
list-item It enables a tag to behave as a <li> tag.
table It enables a tag to behave as a <table> tag.
table-caption It enables a tag to behave as a <caption> tag.
table-column-group It enables a tag to behave as a <colgroup> tag.  
table-header-group It enables a tag to behave as a <thead> tag.  
table-footer-group It enables a tag to behave as a <tfoot> tag.  
table-row-group It enables a tag to behave as a <tbody> tag.  
table-cell It enables a tag to behave as a <td> tag.
table-row It enables a tag to behave as a <tr> tag.
table-column It enables a tag to behave as a <col> tag.

Pin It on Pinterest

Share This