Home > AI > Language > CSS >

visibility

visibility: visible| hidden | collapse | initial | inherit;

The difference between visibility:hidden and display:none.

The former will take space, and content is just missing, while later will not take space.

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>
      Difference between display:"none"; and visibility: "hidden";
    </title>
  </head>

  <body>
    <center>
      <b>
        display:
        <span style="display: none;">display:none</span>
        "none";
      </b>
      <br />

      <b>
        visibility:
        <span style="visibility: hidden;">
          visibility:hidden
        </span>
        "hidden";
      </b>
    </center>
  </body>
</html>

Leave a Reply