Comparison of Visibility and Display attributes in CSS

If you want to change the visibility of an HTML element, will you change the CSS attribute of this element to visibility: hidden or display: none? What are the differences between these two attributes? What should you do when page element visibility changes?

Differences between Visibility and Display attributes
Here is a Demo that compares the differences between visibility: hidden and display: none. Click the link in the upper part of the page. The green Div in the page changes accordingly. Note the impact on other elements when the green Div property is set to visibility: hidden and display: none.

Visibility attribute usage
The Visibility attribute has four available values (visible, hidden, collapse, and inherit), but common values are Visibility and hidden.

Visibility: visible
/* Visible element. Default Value */
Visibility: hidden
/* The element is invisible, but the corresponding space is still reserved for it */
Visibility: collapse
/* Only applies to table objects. It can remove rows or columns but does not affect table layout. If this value is used on an object other than a table, it is displayed as "hidden. */
Visibility: inherit
/* Inherits the visibility value of the upper-level element. */

Usage of the Display attribute
There are many available values for the Display attribute, but here we only pay attention to the following values: block, none, and inline.

Display: none
/* The element is invisible and the corresponding position is not reserved for it */
Display: block
/* Represents a block-level element (typically exclusive to a row )*/
Display: inline
/* Represents a row-level element (generally, a row is not exclusive )*/

It can be seen from this that although both the Visibility and Display attributes can hide an element, the difference between them is visibility: while hiding an element, hidden retains the required space for the element on the page, while display: none deletes the element from the page, the element still exists on the page.

In addition, the difference between display: block and display: inline is that the block element excludes a single row on the page, while the inline element does not. Some objects are block elements by default, some objects use the inline element by default. When using them, you must avoid repeated definitions of the same attributes.

When to use the Visibility or Display attribute?
Although the Visibility and Display attributes can both hide page elements, their difference lies in how to respond to normal document streams.

If you want to hide an element but keep its space on the page, you should use visibility: hidden. Use display: none if you want to hide an element and fill other content with blank content.

In reality, I (the author) prefer to use the display attribute (I believe this is also the habit of most people, bolo note ). When you decide to use display: none to hide an element, you must know that other content will be filled in the blank position left by the element, thus changing the page layout.

Impact of Visibility and Display on SEO
Sometimes we hide the stacked keywords to cheat, but we should not use visibility: hidden and display: none, but set the color of the keywords to the same as the background color, or set the font size of the keyword to be very small, so that the visitor cannot find it.

Some people are worried about visibility: Den den and display: none because they are afraid of spider search. In fact, there are a lot of beautiful results achieved through the conversion of element visibility, and search engines also understand this practice (in fact, search engines often ignore CSS and bolo Note ), therefore, if your goal is not to spoof a search engine, you can safely use visibility: hidden and display: none to hide the content.

Original article: Visibility vs Display in CSS
Reprinted Source: http://blog.imbolo.com/css-visibility-vs-display/