CSS Display and Visibility
Display
The display property in CSS is the most important and commonly used property, which is used to control the layout of an element. It defines how the element is shown, or whether to show or hide them. There are various types of the display property value available in CSS, which are given below-
| Value | Description |
|---|---|
| inline | It is used to display the HTML element as an inline element. |
| inline-block | It is used to display the HTML element as an inline-level block container. |
| block | It is used to display the HTML element as a block element. |
| run-in | It is used to display the HTML element as an inline or block level, depending on context. |
| none | It is used to remove the HTML element from the web page. |
span {
display: block;
}
Visibility
The visibility property in CSS determines whether an element should be visible or not in the HTML document. There are various types of the visibility property value available in CSS, which are given below-
| Value | Description |
|---|---|
| Value | Description |
| visible | It is the default value. The HTML element box and its contents are visible normally in the web document. |
| hidden | The HTML element box and its contents are invisible, but still takes up the space in the HTML document. |
| collapse | It is only used for the table elements. It is used to remove the rows and column from the table without affecting the layout of the table and their space is available for other content. |
| inherit | It defines the value of the visibility property should be inherited from its parent element. |
h1 {
visibility: hidden;
}