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
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:
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:
Changing Display of element
For making inline level element to block level element.
For making block level element to inline level element.
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.