The display property specifies if/how an element is displayed, and the visibility property
specifies if an element should be visible or hidden.
Hiding an element can be done by setting the display property to "none" or the
visibility property to "hidden". However, Note: these two methods produce different
visibility:hidden hides an element, but it will still take up the same space as before. The
element will be hidden, but still affect the layout.
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 the element is not there:
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:
An inline element only takes up as much width as necessary, and does not force line breaks.
Examples of inline elements:
Changing an inline element to a block element, or vice versa, can be useful for making the page
look a specific way, and still follow web standards.
The Below example displays list items as inline elements:
The Below example displays span elements as block elements:
Note: Changing the display type of an element changes only how the element is displayed,
NOT what kind of element it is. For example: An inline element set to display:block is not
allowed to have a block element nested inside of it.
How to display an element as an inline
element.This example demonstrates how to display an element as an inline element.
How to display an element as a
block elementThis example demonstrates how to display an element as a block element.
How to make a table element
collapseThis example demonstrates how to make a table element collapse.
Your Query was successfully sent!