Comment créez-vous un div caché qui ne crée pas de saut de ligne ou d'espace horizontal?

Je veux avoir une case à cocher cachée qui n'occupe pas d'espace sur l'écran.

Si j'ai ceci:

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

Je ne vois pas la case à cocher, mais cela crée toujours une nouvelle ligne.

Si j'ai ceci:

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

il ne crée plus de nouvelle ligne, mais il occupe un espace horizontal sur l'écran.

Existe-t-il un moyen d'avoir un div caché qui ne prend pas de place (vertical ou horizontal?

Utilisation display:none;

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

• visibility: hidden masque l'élément, mais il prend toujours de la place dans la mise en page.

• display: none supprime complètement l'élément du document, il ne prend pas de place.

Depuis la sortie de HTML5, on peut maintenant simplement faire:

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

Remarque: cela n'est pas pris en charge par certains anciens navigateurs, notamment IE <11.

Documentation des attributs cachés ( MDN , W3C )

Utilisez style="display: none;". De plus, vous n'avez probablement pas besoin d'avoir le DIV, il suffit display: noneprobablement de définir le style sur la case à cocher.

En plus de la réponse de CMS, vous voudrez peut-être envisager de mettre le style dans une feuille de style externe et attribuer le style à l'id, comme ceci:

#divCheckbox {
display: none;
}

Étant donné que vous devez vous concentrer sur la convivialité et les généralités en CSS, plutôt que d'utiliser un identifiant pour pointer vers un élément de mise en page spécifique (ce qui entraîne des fichiers CSS énormes ou multiples), vous devriez probablement utiliser à la place une vraie classe dans votre fichier .css lié:

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

ou pour le minimaliste:

.hidden {
display: none;
}

Maintenant, vous pouvez simplement l'appliquer via:

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

Pensez à utiliser <span>pour isoler de petits segments de balisage à coiffer sans casser la disposition. Cela semblerait plus idiomatique que d'essayer de forcer un <div>ne pas s'afficher - si en fait la case à cocher elle-même ne peut pas être stylée comme vous le souhaitez.

Afficher / masquer par clic de souris:

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

Source: ici

Pour empêcher la case à cocher de prendre de l'espace sans le supprimer du DOM, utilisez hidden.

<div hidden id="divCheckbox">

Pour éviter que la case à cocher de prendre tout l' espace et aussi le retirer du DOM, l' utilisation display: none.

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

Pour masquer visuellement l'élément , mais le conserver en html, vous pouvez utiliser:

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

ou

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

Qu'est-ce qui peut mal tourner display:none? Il supprime complètement l'élément du HTML, ainsi certaines fonctionnalités peuvent être cassées si elles ont besoin d'accéder à quelque chose dans l'élément caché.

display: none;

Cela devrait faire disparaître l'élément et ne pas prendre de place.