¿Cómo se crea un div oculto que no crea un salto de línea o un espacio horizontal?

Quiero tener una casilla de verificación oculta que no ocupe espacio en la pantalla.

Si tengo esto:

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

No veo la casilla de verificación, pero aún así crea una nueva línea.

Si tengo esto:

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

ya no crea una nueva línea, pero ocupa espacio horizontal en la pantalla.

¿Hay alguna manera de tener un div oculto que no ocupe espacio (vertical u horizontal?

Utilizar display:none;

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

• visibility: hidden oculta el elemento, pero aún ocupa espacio en el diseño.

• display: none elimina el elemento completamente del documento, no ocupa espacio.

Desde el lanzamiento de HTML5 uno ahora simplemente puede hacer:

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

Nota: Esto no es compatible con algunos navegadores antiguos, especialmente IE <11.

Documentación de atributos ocultos ( MDN , W3C )

Uso style="display: none;". Además, probablemente no necesite tener el DIV, solo establecer el estilo display: noneen la casilla de verificación probablemente sea suficiente.

Además de la respuesta de CMS, es posible que desee considerar colocar el estilo en una hoja de estilo externa y asignar el estilo al ID, de esta manera:

#divCheckbox {
display: none;
}

Dado que debe centrarse en la usabilidad y las generalidades en CSS, en lugar de usar una identificación para apuntar a un elemento de diseño específico (que da como resultado archivos css enormes o múltiples), probablemente debería usar una clase verdadera en su archivo .css vinculado:

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

o para el minimalista:

.hidden {
display: none;
}

Ahora puede simplemente aplicarlo a través de:

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

Considere usar <span>para aislar pequeños segmentos de marcado para diseñar sin romper el diseño. Esto parecería ser más idiomático que intentar forzar a que <div>no se muestre, si de hecho la casilla de verificación en sí no se puede diseñar de la manera que desea.

Mostrar / ocultar haciendo clic con el 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>

Fuente: aquí

Para evitar que la casilla de verificación ocupe espacio sin eliminarlo del DOM, use hidden.

<div hidden id="divCheckbox">

Para evitar que la casilla de verificación ocupe cualquier espacio y también lo elimine del DOM, use display: none.

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

Para ocultar el elemento visualmente , pero mantenerlo en el html, puede usar:

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

o

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

¿Qué puede salir mal display:none? Elimina el elemento completamente del html, por lo que algunas funcionalidades pueden romperse si necesitan acceder a algo en el elemento oculto.

display: none;

Esto debería hacer que el elemento desaparezca y no ocupe ningún espacio.