改行や水平スペースを作成しない非表示のdivをどのように作成しますか？

画面のスペースを取らない非表示のチェックボックスが欲しいのですが。

これがあれば：

<div id="divCheckbox" style="visibility: hidden">

チェックボックスは表示されませんが、それでも新しい行が作成されます。

これがあれば：

<div id="divCheckbox" style="visibility: hidden; display:inline;">

新しい行は作成されなくなりましたが、画面の水平方向のスペースを占有します。

スペースを取らない隠しdivを作成する方法はありますか（垂直または水平）？

使用する display:none;

<div id="divCheckbox" style="display: none;">

• visibility: hidden 要素を非表示にしますが、レイアウトのスペースを占有します。

• display: none 要素をドキュメントから完全に削除します。スペースを取りません。

HTML5のリリース以降、次のことが簡単にできるようになりました。

<div hidden>This div is hidden</div>

注：これは一部の古いブラウザ、特にIE <11でサポートされていません。

非表示属性のドキュメント（MDN、W3C）

を使用しstyle="display: none;"ます。また、おそらくDIVは必要ありませんdisplay: none。チェックボックスでスタイルをに設定するだけで十分でしょう。

CMSの回答に加えて、次のように、スタイルを外部スタイルシートに入れ、IDにスタイルを割り当てることを検討することをお勧めします。

#divCheckbox {
display: none;
}

CSSの使いやすさと一般性に焦点を当てる必要があるため、特定のレイアウト要素を指すためにIDを使用するのではなく（巨大または複数のcssファイルが作成される）、リンクされた.cssファイルで真のクラスを使用する必要があります。

.hidden {
visibility: hidden;
display: none;
}

またはミニマリストの場合：

.hidden {
display: none;
}

これで、次のように簡単に適用できます。

<div class="hidden"> content </div>

を使用<span>して、レイアウトを壊さずにスタイル設定するマークアップの小さなセグメントを分離することを検討してください。これは<div>、実際にはチェックボックス自体を希望どおりにスタイル設定できない場合に、にそれ自体を表示させないようにするよりも慣用的なようです。

マウスクリックで表示/非表示：

<script language="javascript">

    function toggle() {

        var ele = document.getElementById("toggleText");
        var text = document.getElementById("displayText");

        if (ele.style.display == "block") {

            ele.style.display = "none";
            text.innerHTML = "show";
        }
        else {

            ele.style.display = "block";
            text.innerHTML = "hide";
        }
    }
</script>

<a id="displayText" href="javascript:toggle();">show</a> <== click Here

<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

出典：こちら

チェックボックスがDOMから削除せずにスペースを占有しないようにするには、を使用しますhidden。

<div hidden id="divCheckbox">

チェックボックスがスペースを取らず、DOMからも削除されないようにするには、を使用しますdisplay: none。

<div id="divCheckbox" style="display:none">

要素を視覚的に非表示にするには、それをhtmlに保持するには、次のように使用できます。

<div style='visibility:hidden; overflow:hidden; height:0; width:0;'>
  [content]
</div>

または

<div style='visibility:hidden; overflow:hidden; position:absolute;'>
  [content]
</div>

何が問題になるのdisplay:noneでしょうか？HTMLから要素を完全に削除するため、非表示の要素にアクセスする必要がある場合、一部の機能が壊れる可能性があります。

display: none;

これにより、要素が非表示になり、スペースを取らないはずです。