CSS Display & Visibility

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 - display:none or visibility:hidden

Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". However, notice that these two methods produce different results:
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.

Example

h1.hidden {
    visibility: hidden;
}

Try it yourself »

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 if the element is not there:

Example

h1.hidden {
    display: none;
}

Try it yourself »

---

CSS Display - Block and Inline Elements

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:

• <h1>
• <p>
• <li>
• <div>

An inline element only takes up as much width as necessary, and does not force line breaks.
Examples of inline elements:

• <span>
• <a>

---

Changing How an Element is Displayed

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 following example displays <li> elements as inline elements:

Example

li {
    display: inline;
}

Try it yourself »

The following example displays <span> elements as block elements:

Example

span {
    display: block;
}

Try it yourself »

	Note: Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display:block is not allowed to have other block elements inside of it.

All css and css3 for css tools and css3 tools with css code generator and css3 code generator. All css generator and css3 generator for css button gerator and css3 button generator, css gradient generator and css3 gradient generator, css menu maker and css menu maker, css button maker and css3 button maker other help css editor and css3 editor.