105

What is difference between Display vs. Visibility properties?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Sachin R
  • 11,606
  • 10
  • 35
  • 40
  • 8
    possible duplicate of [What is the difference between visibility:hidden and display:none](http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone) – kennytm Aug 13 '10 at 08:24
  • 2
    @KennyTM: that is assuming OP is asking specifically to compare those respective values of each property. – BoltClock Aug 13 '10 at 08:26

4 Answers4

118

The visibility property only tells the browser whether to show an element or not. It's either visible (visible - you can see it), or invisible (hidden - you can't see it).

The display property tells the browser how to draw and show an element, if at all - whether it should be displayed as an inline element (i.e. it flows with text and other inline elements) or a block-level element (i.e. it has height and width properties that you can set, it's floatable, etc), or an inline-block (i.e. it acts like a block box but is laid inline instead) and some others (list-item, table, table-row, table-cell, flex, etc).

When you set an element to display: block but also set visibility: hidden, the browser still treats it as a block element, except you just don't see it. Kind of like how you stack a red box on top of an invisible box: the red box looks like it's floating in mid-air when in reality it's sitting on top of a physical box that you can't see.

In other words, this means elements with display that isn't none will still affect the flow of elements in a page, regardless of whether they are visible or not. Boxes surrounding an element with display: none will behave as if that element was never there (although it remains in the DOM).

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 2
    .. doesn't display have something to do with the DOM? for example... if you have `display: none;`, then that element is removed from the DOM? or am I totally confused? – Hristo Aug 13 '10 at 18:18
  • 4
    @Hristo: Actually, it doesn't. You can *never* affect an element's position or presence in the DOM with CSS alone. – BoltClock May 13 '12 at 23:13
  • 1
    @BoltClock... yes, you're right. I've realized that you can never take an element out of the DOM, but only affect *how* it is displayed in regards to the DOM. does that sound more accurate? – Hristo May 14 '12 at 07:15
  • 1
    One important thing to note that by using jQuery's hide() method, which internally set display to none, you cannot get the position of this element. WHile using visibility you are able to do it. – p0rsche Apr 17 '14 at 03:54
26

visibility: hidden;

  • The element won't be painted AND will not receive click/touch, etc. events (differing from opacity: 0; in this way), but the space it takes is still occupied.
  • Because it's still there for layout purposes, you can measure it without it being visible.
  • Changing content will still cause reflow/re-layout of the page.
  • visibility is inherited, so this means you can make sub-children visible by giving them visibility: visible;.

display: none;

  • Will make the element not participate in the flow/layout.
  • Can (depending on the used browser) kill Flash movies and iframes (which will restart/reload upon showing again), although you can prevent this from happening with iframes.
  • The element won't take up any space. For layout purposes, it's like it does not exist.
  • Will make some browsers/devices (like the iPad) directly take back memory used by that element, causing small hiccups if you switch between none and another value during animations.

Extra Notes:

  • Images in hidden Content:
    In all popular browsers, images are still loaded, even though they are within any element with visibility: hidden; or display: none;.
  • Fonts in hidden Content:
    -webkit- browsers (Chrome/Safari) may delay loading custom fonts that are only used in hidden elements, including through visibility or display. This may cause you to measure elements that are still using a fallback font until the custom font is loaded.
Robert Bradley
  • 548
  • 2
  • 21
Spellcoder
  • 360
  • 3
  • 7
21

display: none removes the element out of the flow of the html whereas visibility:hidden does not.

matpol
  • 3,042
  • 1
  • 15
  • 18
3

display:none; will remove the DOM elements visual style / physical space from the DOM, whereas visibility:hidden; will not remove the element, but simply hide it. So a <div> occupying 300px of vertical space in your DOM will STILL occupy 300px of vertical width when set to visibility:hidden;, but when set to display:none; it's visual styles and the space it occupies are hidden and the space is then "freed" up for lack of a better word.

[EDIT] - It was a while back that I wrote the above, and whether I was not knowledgeable enough or having a bad day, I don't know, but the reality is, the element is NEVER removed from the DOM hierarchy. All block-level display 'styles' are completely 'hidden' when using display:none, whereas with visibility:hidden;, the element itself is hidden, but it still occupies a visual space in the DOM. I hope this clears things up.

Robert Bradley
  • 548
  • 2
  • 21
SimonDowdles
  • 2,026
  • 4
  • 24
  • 36
  • 6
    No, `display: none` will *not* remove an element from the DOM. The element is still there, it just isn't *displayed*. – BoltClock May 13 '12 at 23:14