What is difference between Display vs. Visibility properties?
-
8possible duplicate of What is the difference between visibility:hidden and display:nonekennytm– kennytm2010-08-13 08:24:26 +00:00Commented Aug 13, 2010 at 8:24
-
2@KennyTM: that is assuming OP is asking specifically to compare those respective values of each property.BoltClock– BoltClock2010-08-13 08:26:36 +00:00Commented Aug 13, 2010 at 8:26
Add a comment
|
4 Answers
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).
4 Comments
Hristo
.. 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?
BoltClock
@Hristo: Actually, it doesn't. You can never affect an element's position or presence in the DOM with CSS alone.
Hristo
@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?
p0rsche
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.
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.
visibilityis inherited, so this means you can make sub-children visible by giving themvisibility: 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
noneand another value during animations.
Extra Notes:
- Images in
hiddenContent:
In all popular browsers, images are still loaded, even though they are within any element withvisibility: hidden;ordisplay: none;. - Fonts in
hiddenContent:
-webkit-browsers (Chrome/Safari) may delay loading custom fonts that are only used in hidden elements, including throughvisibilityordisplay. This may cause you to measure elements that are still using a fallback font until the custom font is loaded.
Comments
display: none removes the element out of the flow of the html whereas visibility:hidden does not.
Comments
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.
1 Comment
BoltClock
No,
display: none will not remove an element from the DOM. The element is still there, it just isn't displayed.