Difference Between "Visibility:Collapse" and "Display:None"

Difference between Visibility.Collapsed and Visibility.Hidden

The difference is that Visibility.Hidden hides the control, but reserves the space it occupies in the layout. So it renders whitespace instead of the control.
Visibilty.Collapsed does not render the control and does not reserve the whitespace. The space the control would take is 'collapsed', hence the name.

The exact text from the MSDN:

Collapsed: Do not display the element, and do not reserve space for it in layout.

Hidden: Do not display the element, but reserve space for the element in layout.

Visible: Display the element.

See: http://msdn.microsoft.com/en-us/library/system.windows.visibility.aspx

What's the difference between visibility: hidden and visibility: collapse in flexbox?

Note on browser support: As of July 2017, Chrome (59) does not support visibility: collapse. The code samples below with collapse work in Firefox and Edge, but fail in Chrome (they behave just like hidden). UPDATE: As of July 2020, this is note is still valid. Chrome and Safari treat visibility: collapse like hidden. caniuse.com

---

Flex items are laid out in a row or column, depending on flex-direction.

Each row / column is considered a flex line.

In the examples below, a flex container has four flex items in row-direction. The fourth item wraps, creating a second flex line:

.container {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  border: 1px dashed black;
}
.box {
  height: 50px;
  flex: 0 0 50px;
  margin: 5px;
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
</div>

What is the difference between visibility:hidden and display:none?

display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.

visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.

For example:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

Replacing [style-tag-value] with display:none results in:

test |   | test

Replacing [style-tag-value] with visibility:hidden results in:

test |                        | test

visibility:hidden vs display:none vs opacity:0

The answer found here will answer your first question (most likely display:none as the space is collapsed completely).

To your second question, tools such as this will probably be useful for you. However 40,000 divs sounds like way too many and you will probably have better performance using canvas or SVG (for example, using the KineticJS library as this handles animations - transformation, rotation, scale, etc.) for you.

Performance differences between visibility:hidden and display:none

I'm not aware of any performance difference between display:none and visibility:hidden - even if there is, for as little as 10 elements it will be completely negligible. Your main concern should be, as you say, whether you want the elements to remain within the document flow, in which case visibility is a better option as it maintains the box model of the element.

What is the difference between visibility: hidden and transform: scale(0,0)?

If you set the visibility of an element to hidden it is hidden but still takes up space.

If you set the visiblity to collapse it will not take up space and will behave the same as display:none. But collapse can only be used on table elements.

transform: scale(0,0) will just set the size to 0,0 meaning css properties like float or clear will still take affect on other elements.

CSS Visiblity none vs collapse

Yes you are right, visibility: collapse is only used in table elements.

hidden The box is invisible (fully transparent, nothing is drawn), but still affects layout. Descendants of the element will be visible
if they have visibility:visible (this doesn't work in IE up to version
7).

collapse For table rows, columns, column groups, and row groups the row(s) or column(s) are hidden and the space they would have
occupied is (as if display: none were applied to the column/row of the
table). However, the size of other rows and columns is still
calculated as though the cells in the collapsed row(s) or column(s)
are present. This was designed for fast removal of a row/column from a
table without having to recalculate widths and heights for every
portion of the table. For XUL elements, the computed size of the
element is always zero, regardless of other styles that would normally
affect the size, although margins still take effect. For other
elements, collapse is treated the same as hidden.

reference:https://developer.mozilla.org/en-US/docs/Web/CSS/visibility

---

Related Topics