quitar - salto de linea html

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

Question

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

Si tengo esto:

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

No veo la casilla de verificación, pero sigue creando 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 forma de tener un div oculto que no ocupe espacio (vertical u horizontal)?

Answer 1

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 a la ID, como esto:

#divCheckbox {
display: none;
}

Answer 2

Considere el uso de <span> para aislar pequeños segmentos de marcado para que tengan un estilo sin dividir el diseño. Esto parece ser más idiomático que tratar de forzar a un <div> no se muestre a sí mismo, si de hecho la casilla de verificación no se puede diseñar de la manera deseada.

Answer 3

Desde el lanzamiento de HTML5 uno ahora puede simplemente hacer:

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

Nota: Esto no es supported con algunos navegadores antiguos, sobre todo IE <11.

Documentación de atributos ocultos ( MDN , W3C )

Answer 4

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 espacio y también lo elimine del DOM, use display: none .

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

Answer 5

Si desea ocultar el elemento solo 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>

display: none eliminará el elemento completamente del html, por lo que puede romper algunas funcionalidades si necesita acceder a algo dentro del elemento oculto.

Answer 6

Use style="display: none;" . Además, probablemente no necesite tener el DIV, solo debe configurar el estilo para display: none probablemente display: none en la casilla de verificación sea suficiente.

Answer 7

Ya que debe enfocarse en la usabilidad y las generalidades en CSS, en lugar de usar un id para apuntar a un elemento de diseño específico (que resulta en archivos css grandes o múltiples), probablemente debería usar una verdadera clase en su archivo .css vinculado:

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

o para el minimalista:

.hidden {
display: none;
}

Ahora simplemente puede aplicarlo a través de:

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

Answer 8

display:none; uso 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.

Answer 9

Mostrar / ocultar haciendo clic con el ratón:

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