CSS Display

tutorial and example
tutorial and example

CSS display is used to control the layout of the element. Each element has a default display value.

The given below table of CSS display properties

CSS Display properties Value
Default value Inline
Inherited No
Animation supporting No
Version Css1
Javascript syntax Object,style.display=”none”

CSS Display values

There are various CSS display values which are given below:

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

CSS display inline

In CSS display inline, the element takes the required width only. It doesn’t force the line. The inline element are:

  • <span>
  • <a>
  • <em>
  • <b> etc.

Let us see an example of CSS display inline:

Try Now

CSS display inline-block

In CSS display inline-block, you can able to set the width and height.

Let us see an example of CSS display inline-block:

Try Now

CSS display block

In CSS display block, it takes horizontal space and full available width.

Let us see an example of CSS display block:

Try Now

CSS display none

In CSS display none, it removes the element form the page and does not contain any space.

Let us see an example of CSS display none:

Try Now