CSS-Display

The CSS display property is the most important property of CSS which we use to specifies how the element is displayed. It is used to control the layout of the elements.

CSS display values

The commonly used CSS display values are:

  • display: none;
  • display: inline;
  • display: inline-block;
  • display: block;
  • display: run-in;
  • CSS display none

    To hide and show elements without deleting and recreating them, we use display: none; which is commonly used with JavaScript

    The <script> element uses display: none; as default.

    Example :-

    Result

    This heading is visible.

    This is not visible.

    You can see that the hidden heading does not contain any space.

    CSS display inline

    An inline element only takes up as much width as necessary and does not start on a new line.

    Example :-

    Result

    Display a list of links as a horizontal menu:

    CSS display inline-block

    The CSS display inline-block element and inline element are very similar but the difference is that we are able to set the width and height in inline-block element.

    Example

    Result

    A display property with a value of "block" results in a line break between the two elements.

    CSS display block

    The CSS display block element takes as much as horizontal space as they can. It means the block element takes the full available width. They make a line break before and after them.

    Example

    Result

    Hello dwtutorials.com

    Java Tutorial.

    SQL Tutorial.

    HTML Tutorial.

    CSS Tutorial.

    CSS display run-in

    CSS display run-in elements don't produce a specific box by themselves. This property doesn't work in Mozilla Firefox.

    Example

    Result

    Hello Dwtutorials.com

    Java Tutorial.

    SQL Tutorial.

    HTML Tutorial.

    CSS Tutorial.