Як створити прихований роздільник, який не створює розрив рядка або горизонтальний простір?

Я хочу мати прихований прапорець, який не займає місця на екрані.

Якщо у мене це є:

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

Я не бачу цього прапорця, але він все одно створює новий рядок.

Якщо у мене це є:

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

він більше не створює нову лінію, але займає горизонтальний простір на екрані.

Чи є спосіб мати прихований div, який не займає місця (вертикальний чи горизонтальний?)

Використовуйте display:none;

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

• visibility: hidden приховує елемент, але він все одно займає місце в макеті.

• display: none повністю видаляє елемент з документа, він не займає місця.

З моменту випуску HTML5 можна просто зробити:

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

Примітка. Це не підтримується деякими старими браузерами, особливо IE <11.

Документація щодо прихованих атрибутів ( MDN , W3C )

Використовуйте style="display: none;". Крім того, вам, мабуть, не потрібно мати DIV, просто встановлення стилю display: noneна прапорець, ймовірно, буде достатньо.

На додаток до відповіді CMS ви можете розглянути питання про те, як ввести стиль у зовнішній таблицю стилів та призначити стиль id, наприклад, такий:

#divCheckbox {
display: none;
}

Оскільки вам слід зосередитись на зручності використання та загальних рисах CSS, а не використовувати ідентифікатор, щоб вказати на конкретний елемент компонування (що призводить до величезних чи декількох файлів css), ви, ймовірно, замість цього використовуєте справжній клас у вашому пов'язаному файлі .css:

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

або для мінімалістичного:

.hidden {
display: none;
}

Тепер ви можете просто застосувати його через:

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

Розглянемо <span>можливість виділити невеликі сегменти розмітки для стилю, не порушуючи компонування. Це може здатися більш ідіоматичним, ніж намагатися змусити <div>не відображати себе - якщо насправді сам прапорець не може бути викладений так, як вам потрібно.

Показати / приховати натисканням миші:

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

Джерело: Ось

Щоб запобігти зайняттю будь-якого місця, не знімаючи його з DOM, використовуйте hidden.

<div hidden id="divCheckbox">

Щоб запобігти зайняттю будь-якого місця та також видалити його з DOM, використовуйте display: none.

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

Щоб приховати елемент візуально , але зберегти його в html, ви можете використовувати:

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

або

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

Що може піти не так display:none? Він повністю видаляє елемент з html, тому деякі функції можуть бути порушені, якщо їм потрібно отримати доступ до чогось із прихованого елемента.

display: none;

Це повинно змусити елемент зникнути і не займати місця.