Web UI - Element Visibility (display:none vs visibility:hidden)


To hide an element in CSS, you may use:

The difference is that:

  • with the display:none option, you will not see any blank space
  • while with visibility:hidden, you will (if the element is positioned - ie not absolute)


They are used has the basic elements to implement toggling


  • The css of the element to toggle
.hidden {
  /* Not displayed at first */
  display: none;
  • The trigger element that will toggle the visibility of the target element
  • The target element
<p class="toggle hidden">I'm not visible until you click on the button</p>
  • Result: click on the button to toggle the visibility

Discover More
Firebug Display
CSS - (Display property|Box Type)

The display property defines the box model (layout) type. inline: Default value. Displays an element as inline element. Rules in the user agent's default style sheet may override this value block...
Web UI - Popper library (tooltip and popover positioning)

popper is a positional library that position tooltips and popovers popper is now floating-ui It also makes sure that the positioned element never end up off screen or cropped by an overflow. (Resizing...

Share this page:
Follow us:
Task Runner