Как создать скрытый div, который не создает разрыв строки или горизонтальное пространство?

Я хочу иметь скрытый флажок, который не занимает места на экране.

Если у меня есть это:

<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 вы можете рассмотреть возможность помещения стиля во внешнюю таблицу стилей и присвоения стиля идентификатору, например:

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

Это должно заставить элемент исчезнуть и не занимать места.