Bagaimana Anda membuat div tersembunyi yang tidak membuat hentian garis atau ruang horizontal?

Saya ingin memiliki kotak centang tersembunyi yang tidak memakan ruang di layar.

Jika saya punya ini:

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

Saya tidak melihat kotak centang, tetapi masih membuat baris baru.

Jika saya punya ini:

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

tidak lagi membuat garis baru, tetapi membutuhkan ruang horisontal di layar.

Apakah ada cara untuk memiliki div tersembunyi yang tidak memakan ruang (vertikal atau horizontal?

Menggunakan display:none;

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

• visibility: hidden menyembunyikan elemen, tetapi masih membutuhkan ruang di tata letak.

• display: none menghapus elemen sepenuhnya dari dokumen, itu tidak memakan ruang.

Sejak rilis HTML5 sekarang dapat dengan mudah dilakukan:

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

Catatan: Ini tidak didukung oleh beberapa browser lama, terutama IE <11.

Dokumentasi Atribut Tersembunyi ( MDN , W3C )

Gunakan style="display: none;". Juga, Anda mungkin tidak perlu memiliki DIV, cukup dengan mengatur gaya display: nonepada kotak centang mungkin sudah cukup.

Selain jawaban CMS, Anda mungkin ingin mempertimbangkan untuk meletakkan style dalam stylesheet eksternal dan menetapkan style ke id, seperti ini:

#divCheckbox {
display: none;
}

Karena Anda harus fokus pada kegunaan dan generalisasi dalam CSS, daripada menggunakan id untuk menunjuk ke elemen tata letak tertentu (yang menghasilkan file css besar atau banyak), Anda mungkin harus menggunakan kelas yang benar dalam file .css yang ditautkan:

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

atau untuk minimalis:

.hidden {
display: none;
}

Sekarang Anda cukup menerapkannya melalui:

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

Pertimbangkan <span>untuk mengisolasi segmen kecil markup yang akan ditata tanpa merusak tata letak. Ini tampaknya lebih idiomatis daripada memaksakan <div>tidak untuk menampilkan dirinya sendiri - jika kotak centang itu sendiri tidak dapat ditata seperti yang Anda inginkan.

Tampilkan / sembunyikan dengan klik mouse:

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

Sumber: Di sini

Untuk mencegah kotak centang mengambil ruang apa pun tanpa menghapusnya dari DOM, gunakan hidden.

<div hidden id="divCheckbox">

Untuk mencegah kotak centang mengambil ruang apa pun dan juga menghapusnya dari DOM, gunakan display: none.

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

Untuk menyembunyikan elemen secara visual , tetapi menyimpannya di html, Anda dapat menggunakan:

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

atau

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

Apa yang salah display:none? Ini menghapus elemen sepenuhnya dari html, sehingga beberapa fungsi mungkin rusak jika mereka perlu mengakses sesuatu di elemen tersembunyi.

display: none;

Ini harus membuat elemen menghilang dan tidak memakan ruang.