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 crea una nueva línea.

Si tengo esto:

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

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

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

2

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

4

Desde el lanzamiento de HTML5 ahora uno puede simplemente hacer:

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

Nota: Esto no es soportado por algunos navegadores antiguos, sobre todo IE

Oculto Documentación de atributos (MDN,W3C)

2

Usar style="display: none;". Además, probablemente no necesite tener el DIV, simplemente establezca el estilo en display: none en la casilla de verificación probablemente sea suficiente.

1

Dado que debe centrarse en la usabilidad y las generalidades en CSS, en lugar de usar una identificación para señalar 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 los minimalistas:

.hidden {
display: none;
}

Ahora puede simplemente aplicarlo a través de:

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

2

Además de la respuesta de CMS, es posible que desee considerar poner el estilo en una hoja de estilo externa y asignar el estilo a la identificación, así:

#divCheckbox {
display: none;
}

2

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

<div hidden id="divCheckbox">

Para evitar que la casilla de verificación ocupe espacio y además eliminándolo del DOM, use display: none.

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

0

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

Mostrar / ocultar con un 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="http://stackoverflow.com/questions/1992114/javascript:toggle();">show</a> <== click Here

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

Fuente: Aquí

Para ocultar el elemento visualmente, pero manténgalo en 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 con display:none? Elimina el elemento completamente del html, por lo que algunas funcionalidades pueden romperse si necesitan acceder a algo en el elemento oculto.

Esto debería hacer desaparecer el elemento y no ocupar espacio.

1

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas