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

Ответ 1

Используйте display:none;

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

• visibility: hidden скрывает элемент, но по-прежнему занимает место в макете.

• display: none полностью удаляет элемент из документа, он не занимает места.

Ответ 2

С момента выпуска HTML5 теперь можно просто сделать:

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

Примечание. Это не поддерживается некоторыми старыми браузерами, в особенности IE < 11.

Скрытая документация атрибутов (MDN, W3C)

Ответ 3

Используйте style="display: none;". Кроме того, вам, вероятно, не нужно иметь DIV, возможно, достаточно установить стиль display: none в флажке.

Ответ 4

В дополнение к ответу CMS вы можете захотеть поместить стиль во внешнюю таблицу стилей и присвоить стиль идентификатору, например:

#divCheckbox {
display: none;
}

Ответ 5

Поскольку вам следует сосредоточиться на удобстве использования и общих чертах в CSS, вместо того, чтобы использовать id для указания на конкретный элемент макета (который приводит к огромным или нескольким файлам css), вы, вероятно, должны вместо этого использовать истинный класс в связанном файле .css

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

или для минималиста:

.hidden {
display: none;
}

Теперь вы можете просто применить его через:

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

Ответ 6

Подумайте, используя <span>, чтобы изолировать небольшие сегменты разметки, которые нужно стилизовать, не разбирая макет. Казалось бы, это более идиоматично, чем попытка заставить <div> не отображать себя - если на самом деле флажок сам по себе не может быть создан так, как вы хотите.

Ответ 7

Показать/скрыть щелчком мыши:

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

Источник: Здесь

Ответ 8

Чтобы флажок не занимал место, не удаляя его из DOM, используйте hidden.

<div hidden id="divCheckbox">

Чтобы флажок не занимал место, а также удалял его из DOM, используйте display: none.

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

Ответ 9

Чтобы скрыть элемент визуально, но сохранить его в 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, поэтому некоторые функции могут быть нарушены, если им нужно получить доступ к чему-то в скрытом элементе.