4 Common ways to hide HTML elements using CSS

Today's web design is becoming more dynamic, and we often need to hide certain elements and display them at certain times. We can usually use 4 methods to hide and display elements.

The 4 techniques for displaying and hiding elements each have their own drawbacks, as illustrated below.

In this article, we will use the following HTML code and CSS styles to explain the techniques of 4 hidden elements.

<p>Dice used for traditional Dungeons ...</p><img src="dice.jpg" alt=”Photograph..." id="dice"><p>The dice are used to determine...</p>

The basic CSS style is as follows:

img#dice { float: right; margin-left: 2em; }

Visibility:hidden

img#dice { float: right; margin-left: 2em; visibility: hidden; }

visibility: hiddenis the first choice for many people to hide an HTML element. As shown in the image on the right, the picture is missing, but there is no space left in the original picture. This property simply hides an element, but the space occupied by the element exists.

Settings visibility: visible can make hidden elements visible.

opacity:0

img#dice { float: right; margin-left: 2em; opacity: 0; }

This is a CSS3 property that allows opacity: 0 an element to become completely transparent and thus produce the visibility: hidden same effect. opacityand visibility compared to its advantage is that it can be transition and animate .

You can usually use opacity attributes to make the fade effect of an element.

Settings opacity:1 can make transparent elements visible.

Position:absolute

img#dice { position: absolute; left: -1000px; }

The oldest and most standard practice is to set the absolute positioning of elements to hide elements. This technique allows elements to move out of the document stream, above the normal document, and set a large negative position for the element to be left positioned outside the visible area. floatand margin Neither position: absolute can affect the elements, so they are well hidden.

Using this technique is the best way to make linear animations of some elements.

For the element to become visible again, you can increase left the value so that the element appears on the screen.

Display:none

img#dice { display: none; }

display: noneis also a very old technology, it is position: absolute a visibility: hidden; compromise method, and the elements will become invisible and will no longer occupy the space of the document.

display: noneUseful when making accordion effects.

Setting an element to display: block or another value can make the element visible again.

In addition to the 4 methods described above, there are other ways to hide elements, especially when using CSS3. For example, you can use scale attributes to reduce the size of an element until it disappears. However scale opacity: 0 visibility: hidden , as with properties, invisible elements occupy the space of the document.

In the next article, we'll add several more advanced methods of hiding elements that will only work in modern browsers.

4 Common ways to hide HTML elements using CSS