Elementos ocultos de HTML toman espacio

Question

Me gustaría hacer algunos elementos vacíos ocultos (los iframes estarían bien, los párrafos lo harían) que luego el Javascript llenaría y modificaría. No he podido averiguar cómo evitar que estos elementos ocupen espacio. Desactivé los márgenes y el relleno, y configuré la altura en cero, pero igual termino en blanco.

Me gustaría ver un ejemplo de un elemento oculto que no ocupe espacio en la página. En realidad, me gustaría ver el HTML, CSS y Javascript. :-).

Answer 1

Si está utilizando visibility: hidden; usted debe utilizar display: none; lugar.

Answer 2

#myelement { display:none; } ya debería hacerlo a través de CSS, utilizando <div id="myelement"></div>

Answer 3

La solución más común es una entrada con el tipo oculto.

<input type="hidden" value="yourvalue" id="yourid" /> 

No requiere estilo.

puede establecer el valor de esta entrada con algo como

document.getElementById('yourid').value="The Value Here"; 

Answer 4

¿Por qué no puede simplemente establecer style = "display: none" o style = "visibility: hidden", y luego configurarlo para que sea visible después de que haya obtenido el contenido faltante?

Answer 5

Supongo que está utilizando la visibilidad: ¿oculto? Como has visto, esto lo ocultará, pero aún ocupará espacio.

Sin embargo, al usar la pantalla: ninguno la ocultará y la eliminará del diseño de la página.

Answer 6

style="visibility:hidden;line-height:0;" 

Establecer la altura a menos de la altura de la línea es generalmente una pérdida de tiempo.

Answer 7

He encontrado que si uso visibility: none entonces pierdo los objetivos incrustados en esos objetos. Como resultado, establecí el font-size: 0pt que parece funcionar bien para mí.

Utilizo esto para ocultar los nombres predeterminados que ReSTructured text pone para los objetivos internos en línea; span.target { font-size: 0pt };