CSS Display (display) and Visibility (visibility)

How to display an element property is set to be displayed, visibility attribute specifies that an element should be visible or hidden.

Box 1

Box 2

Box 3

Hidden elements - display: none or visibility: hidden

Hide an element by the display attribute set to "none", or the visibility property to "hidden". Note, however, these two methods will produce different results.

visibility: hidden to hide an element, but hidden element remains the same as before the occupation and not hidden space. That is, although the element is hidden, but still affect the layout.

Examples

h1.hidden {visibility:hidden;}

try it"

display: none to hide an element, and the hidden elements do not take up any space. In other words, this element is not only hidden, and the space occupied by the original element will disappear from the page layout.

Examples

h1.hidden {display:none;}

try it"

CSS Display - Block and inline elements

Block element is an element, taking up the entire width of a line break before and after it.

Examples of block elements:

<H1>
<P>
<Div>

Inline elements only need the necessary width, does not force line breaks.

Examples of inline elements:

<Span>
<a>

How to change a display element

You can change the block elements and inline elements, and vice versa, can make the page look is a combination of a particular way, and still follow web standards.

The following example displays list items as inline elements:

Examples

li {display:inline;}

try it"

The following example span elements as block elements:

Examples

span {display:block;}

try it"

Note: Change the type of display elements to see how the element is displayed, it is what kind of elements.For example: An inline element set to display: block is not allowed to have its own internal nested block elements.