visibility

ツールバーの

visible

ELLRIMENTが見える

hidden

ページにはエンティティは表示されませんが、スペースは保持されます(レイアウト)

collapse

2<table>行、列に適用され、display=noneに設定されているのと同じです.

の他の要因では、hiddenと同じである.

ex)<table>からhiddenとcollapseの違い
html

<table>
  <tr>
    <td>1.1</td>
    <td class="visible">1.2</td>
    <td>1.3</td>
  </tr>
  <tr class="visible">
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>

css

table {
  border: 1px solid red;
}

td {
  border: 1px solid gray;
}

.visible {
  visibility: hidden;
}

visibility: hidden

visibility: collapse

display

ツールバーの

none

レンダリングしない要素は表示されず、スペースも存在しません

block

親要素のすべてのスペースを占有してブロックを作成します.

<div> , <p> , <h1~6> , <form>

inline

構成要素に割り当てられたタグのみを使用するスペース

<a> , <span> , <img>

inline-block

inlineのように機能するが、blockのようにwidthとheightを設けることができる.
ex)display属性差異

span.a {
  display: inline; /* the default for span */
  padding: 5px;
  border: 1px solid blue;  
  background-color: yellow; 
}

span.b {
  display: inline-block;
  width: 110px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: yellow; 
}

span.c {
  display: block;
  width: 110px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: yellow; 
}

flex

リファレンス

https://developer.mozilla.org/ko/docs/Web/CSS/visibility
https://www.w3schools.com/css/css_inline-block.asp