Como você cria uma div oculta que não cria uma quebra de linha ou espaço horizontal?

Quero ter uma caixa de seleção oculta que não ocupe espaço na tela.

Se eu tiver isso:

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

Não vejo a caixa de seleção, mas ela ainda cria uma nova linha.

Se eu tiver isso:

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

não cria mais uma nova linha, mas ocupa espaço horizontal na tela.

Existe uma maneira de ter uma div oculta que não ocupa espaço (vertical ou horizontal?

Usar display:none;

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

• visibility: hidden oculta o elemento, mas ainda ocupa espaço no layout.

• display: none remove o elemento completamente do documento, não ocupa espaço.

Desde o lançamento do HTML5, agora é possível:

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

Nota: Isso não é suportado por alguns navegadores antigos, principalmente o IE <11.

Documentação de atributo oculto ( MDN , W3C )

Use style="display: none;". Além disso, você provavelmente não precisa ter o DIV, apenas definir o estilo como display: nonena caixa de seleção provavelmente seria suficiente.

Além da resposta do CMS, você pode considerar colocar o estilo em uma folha de estilo externa e atribuir o estilo ao ID, assim:

#divCheckbox {
display: none;
}

Como você deve se concentrar na usabilidade e nas generalidades em CSS, em vez de usar um ID para apontar para um elemento de layout específico (que resulta em arquivos CSS enormes ou múltiplos), você provavelmente deve usar uma classe verdadeira no seu arquivo .css vinculado:

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

ou para o minimalista:

.hidden {
display: none;
}

Agora você pode simplesmente aplicá-lo via:

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

Considere usar <span>para isolar pequenos segmentos de marcação a serem estilizados sem interromper o layout. Isso parece ser mais idiomático do que tentar forçar a <div>não se exibir - se, de fato, a caixa de seleção em si não puder ser estilizada da maneira que você deseja.

Mostrar / ocultar com o clique do 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>

Fonte: Aqui

Para impedir que a caixa de seleção ocupe espaço sem removê-la do DOM, use hidden.

<div hidden id="divCheckbox">

Para impedir que a caixa de seleção ocupe espaço e também a remova do DOM, use display: none.

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

Para ocultar o elemento visualmente , mas mantenha-o no html, você pode usar:

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

ou

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

O que pode dar errado display:none? Ele remove o elemento completamente do html, portanto, algumas funcionalidades podem ser quebradas se eles precisarem acessar algo no elemento oculto.

display: none;

Isso deve fazer o elemento desaparecer e não ocupar espaço.