Gli elementi HTML nascosti prendono spazio

Question

Mi piacerebbe creare alcuni elementi nascosti vuoti (gli iframe sarebbero carini, i paragrafi farebbero) che Javascript in seguito riempirebbe e modificherà. Non sono stato in grado di capire come mantenere questi elementi dal prendere spazio. Ho disattivato i margini e il padding e ho impostato l'altezza a zero, ma ho ancora spazio vuoto.

Mi piacerebbe vedere un esempio di un elemento nascosto che non occupa spazio sulla pagina. In realtà, mi piacerebbe vedere l'HTML, CSS e Javascript. :-).

Answer 1

Se stai usando visibility: hidden; si dovrebbe usare display: none; invece.

Answer 2

#myelement { display:none; } dovrebbe già farlo tramite CSS, utilizzando <div id="myelement"></div>

Answer 3

La soluzione più comune è un input di tipo nascosto.

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

Nessuno stile richiesto.

È possibile impostare il valore di questo ingresso con somthing come

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

Answer 4

Perché non puoi semplicemente impostare style = "display: none" o style = "visibility: hidden", e quindi impostarlo su visible dopo aver completato il contenuto mancante?

Answer 5

Suppongo tu stia utilizzando la visibilità: nascosta? Come hai visto, questo lo nasconderà, ma occuperà ancora spazio.

Tuttavia, utilizzando il display: nessuno lo nasconde e lo rimuove dal layout di pagina.

Answer 6

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

Impostare l'altezza a meno dell'altezza della linea è generalmente una perdita di tempo.

Answer 7

Ho scoperto che se uso visibility: none allora perdo gli obiettivi incorporati in quegli oggetti. Di conseguenza ho impostato il font-size: 0pt che sembra funzionare bene per me.

Io lo uso per nascondere i nomi predefiniti che il testo di ReSTructured inserisce per i target interni incorporati; span.target { font-size: 0pt };