CSS Display

CSS Display is used to control visibility of an element, Hiding an element can be done by setting the display property to “none”. display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there. For CSS Display property there are lot of other values for this Display property.

Syntax for CSS Display Property

display:none;

There are two types of display elements.

1) Block level Element

A block element is an element that takes up the full width available, and has a line break before and after it.

Examples of block elements:

<h1>
<p>
<div>

2) Inline level Element

An inline element only takes up as much width as necessary, and does not force line breaks.

Examples of inline elements:

<span>
<a>

Changing Display of element

For making inline level element to block level element.

display:block;

For making block level element to inline level element.

display:inline;

Possible values for CSS Display property

  • inline : Default value. Displays an element as an inline element (like <span>)
  • block : Displays an element as a block element (like <p>)
  • flex : Displays an element as an block-level flex container. New in CSS3
  • inline-block : Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box
  • inline-flex : Displays an element as an inline-level flex container. New in CSS3
  • inline-table : The element is displayed as an inline-level table
  • list-item : Let the element behave like a <li> element
  • run-in : Displays an element as either block or inline, depending on context
  • table : Let the element behave like a <table> element
  • table-caption : Let the element behave like a <caption> element
  • table-column-group : Let the element behave like a <colgroup> element
  • table-header-group : Let the element behave like a <thead> element
  • table-footer-group : Let the element behave like a <tfoot> element
  • table-row-group : Let the element behave like a <tbody> element
  • table-cell : Let the element behave like a <td> element
  • table-column : Let the element behave like a <col> element
  • table-row : Let the element behave like a <tr> element
  • none : The element will not be displayed at all (has no effect on layout)
  • initial : Sets this property to its default value.
  • inherit : Inherits this property from its parent element.

If you have any problem with CSS Display property, let me know by using comment form below.

Incoming search terms:

  • css display
Vivek Vengala
 

Vivek Vengala is a Online Entrepreneur, Web Developer from Hyderabad India.

Click Here to Leave a Comment Below 0 comments

Leave a Reply:

x

Join My Facebook Group to Receive Coding Tutorial for Free

email-subsribe