回答:
display:none問題のタグがページにまったく表示されないことを意味します（ただし、domを使用してタグを操作することはできます）。他のタグの間にスペースが割り当てられません。
visibility:hiddenとは異なりdisplay:none、タグは表示されませんが、ページ上にタグが割り当てられます。タグはレンダリングされますが、ページには表示されません。
例えば：
test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test交換[style-tag-value]でdisplay:noneのような結果になります。
test | | test交換[style-tag-value]でvisibility:hiddenのような結果になります。
test | | testvisibility: hiddenとdisplay: noneそれらの両方リトリガレイアウトは、ペイント及び複合ので等しくパフォーマンスであろう。ただし、opacity: 0は機能的に同等でvisibility: hiddenあり、レイアウト手順を再トリガーしないため、空のスペースがまだ割り当てられていることを気にしない場合は、それを使用することをお勧めします（それ以外の場合はを使用しますdisplay: none）。
opacity: 0入力またはボタンはまだ存在し、奇妙なユーザーインタラクションを引き起こす可能性があるため、入力またはボタンを扱う場合は注意して使用する必要があります。
同義語ではありません。
display:none ページの通常のフローから要素を削除し、他の要素が入力できるようにします。
visibility:hidden 要素がページの通常のフローに残っているため、まだスペースを占めています。
あなたが遊園地での乗車に列を作っており、列の誰かが非常に乱暴になり、警備員が列から彼らを引き抜くと想像してください。その後、列に並んだ全員が1つ前の位置に移動して、空になったスロットを埋めます。これはみたいdisplay:noneです。
これを同様の状況と比較してください。ただし、あなたの前の誰かが不可視のマントを着用している場合。線を表示していると、何もないスペースがあるように見えますが、誰かがまだそこにいるため、人々は実際にはその空のスペースを埋めることはできません。これはみたいvisibility:hiddenです。
質問はされませんでしたが、追加する価値があることの1つは、オブジェクトを完全に透明にする3番目のオプションがあることです。検討してください：
1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.（結果を表示するには、必ず上の[コードスニペットの実行]ボタンをクリックしてください。）
1と2の違いはすでに指摘されています（つまり、2はまだ領域を占有します）。ただし、2と3の間には違いがあります。ケース3の場合、リンクの上にマウスを置くと、マウスは引き続き手に切り替わり、ユーザーはリンクをクリックでき、JavaScriptイベントは引き続きリンク上で発生します。これは通常はありませんあなたが望む行動（多分、時にはそれがあります？）。
もう1つの違いは、テキストを選択し、プレーンテキストとしてコピー/貼り付けすると、次のようになることです。
1st link.
2nd link.
3rd unseen link.
ケース3では、テキストはコピーされます。多分これはある種の透かしに役立つでしょう、あるいは不注意にユーザーがあなたのコンテンツをコピー/貼り付けした場合に表示されるであろう著作権表示を隠したいのであれば？
子ノードに関しては大きな違いがあります。例：親divとネストされた子divがある場合。したがって、次のように記述した場合：
<div id="parent" style="display:none;">
<div id="child" style="display:block;"></div>
</div>
この場合、どのdivも表示されません。しかし、次のように書くと：
<div id="parent" style="visibility:hidden;">
<div id="child" style="visibility:visible;"></div>
</div>
すると、子divが表示されますが、親divは表示されません。
display: none 要素をページから完全に削除し、ページは要素がまったく存在しないかのように構築されます。
Visibility: hidden 見えなくても、ドキュメントフローにスペースを残します。
これは、何をしているのかによって、大きな違いをもたらす場合とそうでない場合があります。
visibility:hiddenオブジェクトがまだページ上の垂直方向の高さを占めます。display:noneそれが完全に除去されます。画像の下にdisplay:noneテキストがあり、その場合、そのテキストは、画像があったスペースを埋めるために上に移動します。visibility：hiddenを実行すると、テキストは同じ場所に残ります。
display: none; ページ上では利用できず、スペースを占有しません。
visibility: hidden; 要素を非表示にしますが、以前と同じスペースを占有します。要素は非表示になりますが、レイアウトには影響します。
visibility: hiddenスペースを保存しますが、スペースdisplay: noneは保存しません。
何も表示しない例：https : //www.w3schools.com/css/tryit.asp?filename=trycss_display_none
可視性の非表示の例：https : //www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility
可視性プロパティがに設定されている"hidden"場合、ブラウザはコンテンツが非表示であっても、ページ上でコンテンツのためのスペースを確保します。
ただし、オブジェクトをに設定する"display:none"と、ブラウザはそのコンテンツ用にページ上のスペースを割り当てません。
例：
<div style="display:none">
Content not display on screen and even space not taken.
</div>
<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>もう1つの違いは、それvisibility:hiddenは本当に非常に古いブラウザで動作し、次のことdisplay:noneはしないことです。
違いはスタイルを超えており、JavaScriptで操作したときの要素の動作に反映されています。
の効果と副作用display: none：
clientWidth、clientHeight、offsetWidth、offsetHeight、scrollWidth、scrollHeight、getBoundingClientRect()、getComputedStyle()、すべてのリターン0の。の効果と副作用visibility: hidden：
innerTextinnerHTMLターゲット要素と子孫の（ではない）は空の文字列を返します。display:none;要素を表示せず、ページ上の要素にスペースを割り当てませんが、ページvisibility:hidden;に要素を表示せず、ページ上のスペースを割り当てます。どちらの場合もDOMの要素にアクセスできます。よりよく理解するには、次のコードを見てください：
display：none vs visibility：hidden
ここには多くの詳細な回答がありますが、影響があるため、アクセシビリティに対処するためにこれを追加する必要があると思いました。
display: none;そして、visibility: hidden;、すべてのスクリーンリーダーソフトウェアで読み取ることはできません。視覚障害者が体験することを覚えておいてください。
質問は同義語についても尋ねます。text-indent: -9999px;ほぼ同等のもう1つです。との重要な違いtext-indentは、スクリーンリーダーで読み上げられることが多いことです。ユーザーがまだリンクにタブで移動できるため、少し悪い体験になる可能性があります。
アクセシビリティに関して、私が今日使用しているのは、スクリーンリーダーに表示されているときに要素を非表示にするスタイルの組み合わせです。
{
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}コンテンツ本体のアンカーへの「コンテンツにスキップ」リンクを作成することをお勧めします。視覚障害のあるユーザーは、すべてのページで完全なナビゲーションツリーを聞きたくないでしょう。リンクを視覚的に非表示にします。ユーザーはタブを押すだけでリンクにアクセスできます。
アクセシビリティと非表示コンテンツの詳細については、以下を参照してください。