The Display Property
The display property specifies if and how an element is displayed.
The display property accepts three possible values;
- inline: browser displays the item and elements only takes up as much space as necessary. Examples of inline elements are the span, a and img tags.
- block: stretches out to and as far as it can. Examples of the block elements are li, div, h1 - h6, p, form, header, footer and section tags.
- none: browser hides the item.
- inherit: inherits property from parent element.
The Visibilty Property
The Visibility specifies whether or not an element should be visible.
The visibility property accepts four possible values;
- visible: visible to show elements
- hidden: hides elements
- collapse: collapses elements where applicable, such as a table row
- inherit: inherits the values of the visibility property from the parent
I hope this codepen does some justice