Come si crea un div nascosto che non crea un'interruzione di linea o spazio orizzontale?

Voglio avere una casella di controllo nascosta che non occupa spazio sullo schermo.

Se ho questo:

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

Non vedo la casella di controllo, ma crea comunque una nuova riga.

Se ho questo:

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

non crea più una nuova linea, ma occupa spazio orizzontale sullo schermo.

C'è un modo per avere un div nascosto che non occupa spazio (verticale o orizzontale?

Uso display:none;

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

• visibility: hidden nasconde l'elemento, ma occupa ancora spazio nel layout.

• display: none rimuove completamente l'elemento dal documento, non occupa spazio.

Dal rilascio di HTML5 ora si può semplicemente fare:

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

Nota: questo non è supportato da alcuni vecchi browser, in particolare IE <11.

Documentazione sugli attributi nascosti ( MDN , W3C )

Usa style="display: none;". Inoltre, probabilmente non è necessario disporre del DIV, è sufficiente impostare lo stile display: nonesu nella casella di controllo.

Oltre alla risposta di CMS, potresti prendere in considerazione l'idea di inserire lo stile in un foglio di stile esterno e assegnare lo stile all'ID, in questo modo:

#divCheckbox {
display: none;
}

Dal momento che dovresti concentrarti sull'usabilità e sulle generalità nei CSS, piuttosto che usare un id per puntare a un elemento di layout specifico (che si traduce in file css enormi o multipli) probabilmente dovresti invece usare una vera classe nel tuo file .css collegato:

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

o per il minimalista:

.hidden {
display: none;
}

Ora puoi semplicemente applicarlo tramite:

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

Prendi in considerazione l'idea <span>di isolare piccoli segmenti di markup da applicare in stile senza scomporre il layout. Ciò sembrerebbe più idiomatico del tentativo di forzare a <div>non mostrarsi - se in effetti la casella stessa non può essere disegnata nel modo desiderato.

Mostra / nascondi con il clic del mouse:

<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>

Fonte: qui

Per impedire alla casella di controllo di occupare spazio senza rimuoverla dal DOM, utilizzare hidden.

<div hidden id="divCheckbox">

Per impedire alla casella di controllo di occupare spazio e anche di rimuoverla dal DOM, utilizzare display: none.

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

Per nascondere visivamente l'elemento , ma tenerlo nell'html, è possibile utilizzare:

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

o

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

Cosa potrebbe andare storto display:none? Rimuove completamente l'elemento dall'html, quindi alcune funzionalità potrebbero essere interrotte se devono accedere a qualcosa nell'elemento nascosto.

display: none;

Questo dovrebbe far scomparire l'elemento e non occupare spazio.