Comment créer une div cachée qui ne crée pas de saut de ligne ou d'espace horizontal

Question

Je veux avoir une case à cocher cachée qui ne prend pas d'espace sur l'écran

si j'ai ceci:

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

Je ne vois pas la case à cocher mais il 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 prend de l'espace horizontal sur l'écran.

est-il de toute façon d'avoir un div caché qui ne prend pas de place (vertical ou horizontal?

Answer 1

Utilisez display:none;

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

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

• display: none supprime complètement l'élément du document, il ne prend aucun espace.

Answer 2

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

Answer 3

Puisque vous devriez vous concentrer sur la convivialité et les généralités en CSS, plutôt que d'utiliser un identifiant pour désigner un élément de mise en page spécifique (qui génère des fichiers css énormes ou multiples), vous devriez probablement utiliser une véritable 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>
 

Answer 4

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

 #divCheckbox {
display: none;
}
 

Answer 5

Pensez à utiliser pour isoler des petits segments de balisage qui portera sans rupture jusqu'à mise en page. Cela semble être plus idiomatique que d’essayer de forcer un ne pas à afficher elle-même--si en effet la case lui-même ne portera le comme vous le souhaitez.