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?
Respostas:
Usar
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.fonte
<div id="divCheckbox" style="display: inline-block;">
inline-block
? Odisplay
valor padrão para uma div éblock
!display: none
paradisplay: inline-block
ou equivalente sem que a div agora exibida ocupe espaço e mova meus outros elementos DOM?display: none
embora diretamente do HTML. No entanto, qualquer uso dadisplay
propriedade substitui o comportamento dohidden
atributo global.Desde o lançamento do HTML5, agora é possível:
Nota: Isso não é suportado por alguns navegadores antigos, principalmente o IE <11.
Documentação de atributo oculto ( MDN , W3C )
fonte
Use
style="display: none;"
. Além disso, você provavelmente não precisa ter o DIV, apenas definir o estilo comodisplay: none
na caixa de seleção provavelmente seria suficiente.fonte
visibility: hidden
mas isso estava mostrando um espaço vazio.style="display: none;"
trabalhou como um pouco de charme :)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:
fonte
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:
ou para o minimalista:
Agora você pode simplesmente aplicá-lo via:
fonte
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.fonte
Mostrar / ocultar com o clique do mouse:
Fonte: Aqui
fonte
Para impedir que a caixa de seleção ocupe espaço sem removê-la do DOM, use
hidden
.Para impedir que a caixa de seleção ocupe espaço e também a remova do DOM, use
display: none
.fonte
Para ocultar o elemento visualmente , mas mantenha-o no html, você pode usar:
ou
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.fonte
Isso deve fazer o elemento desaparecer e não ocupar espaço.
fonte