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

354

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?

leora
fonte
Existe algum uso para essa div?
Jonno_FTW
6
@ Jonno: É comumente usado em AJAX. Digamos que você tenha uma lista de itens com triângulos de divulgação. Você deseja que os detalhes ou uma subárvore apareçam quando o usuário clicar no triângulo de divulgação. Então, o que você faz é colocar um <div id = "theID" style = "display: none;"> para onde os detalhes devem ir. Então, quando o usuário clica no triângulo, você move o triângulo para uma posição "no meio do caminho" (apontando para o sudeste) e dispara uma solicitação AJAX para preencher o <div>. Quando a solicitação AJAX termina, você vira o triângulo para o sul e remove a "exibição: nenhuma;" do estilo do <div>. A biblioteca script.aculo.us faz muito isso.
Mike DeSimone

Respostas:

717

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.

CMS
fonte
42
para mostrar a div novamente (apenas nas necessidades de qualquer um caso como fez I) -<div id="divCheckbox" style="display: inline-block;">
anujin
14
@anujin: Por quê inline-block? O displayvalor padrão para uma div é block!
MMM 29/01
Existe uma maneira de fazer o oposto? Alterar uma div de display: nonepara display: inline-blockou equivalente sem que a div agora exibida ocupe espaço e mova meus outros elementos DOM?
bpromas
11
vale a pena atualizar a resposta para incluir o atributo HTML global oculto, disponível desde o HTML5.1, que é basicamente o mesmo que dizer, display: noneembora diretamente do HTML. No entanto, qualquer uso da displaypropriedade substitui o comportamento do hiddenatributo global.
Marius Mucenicu
54

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 )

C_B
fonte
11
Isso é mais semanticamente correto do que ocultar com CSS, é melhor para acessibilidade e é suportado por todos os principais navegadores. Deve ser a resposta aceita em 2020.
Robin Métral
29

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.

tvanfosson
fonte
Preciso me ocultar a mensagem de alerta no carregamento da página e queria mostrá-la novamente ao clicar no botão. Tentei, visibility: hiddenmas isso estava mostrando um espaço vazio. style="display: none;"trabalhou como um pouco de charme :)
sohaiby
8

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;
}
Zeta Two
fonte
+1, é realmente uma boa sugestão, mas como mostrar apenas uma caixa de seleção sem afetar a visibilidade de todas as outras caixas de seleção?
Owais Qureshi
11
@dotNetSoldier Pergunta antiga, mas deve haver uma resposta aqui. Você tem uma classe css chamada invis e a adiciona / remove da caixa de seleção ou div por id usando JS.
DanielST
8

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>
Dave
fonte
código parece muito mais limpo dessa maneira! Prefiro ter uma aula sobre o estilo em linha
Harry Cho
5

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.

Rich Churcher
fonte
4

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

Mahdi Jazini
fonte
4

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">
smac89
fonte
3

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.

THN
fonte
0

display: none;

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

Jose Luis Rasmussen Garcia
fonte
Obrigado às pessoas que comentaram a formatação da minha resposta.
Jose Luis Rasmussen Garcia