You can control layout by showing and hiding them declaratively in the HTML markup or modifying the objects' CSS properties, sometimes using Javascript.
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
Top comments (0)