{"id":37067,"date":"2025-01-17T09:17:12","date_gmt":"2025-01-17T12:17:12","guid":{"rendered":"https:\/\/www.locaweb.com.br\/ajuda\/?post_type=ht_kb&p=37067"},"modified":"2025-01-17T09:17:12","modified_gmt":"2025-01-17T12:17:12","slug":"display-none","status":"publish","type":"ht_kb","link":"https:\/\/www.locaweb.com.br\/ajuda\/wiki\/display-none\/","title":{"rendered":"O que \u00e9 display: none, quando usar e diferen\u00e7a para visibility: hidden e opacity: 0"},"content":{"rendered":"

A linguagem CSS oferece diversas formas de controlar a visibilidade de elementos em uma p\u00e1gina web. Entender como cada uma delas funciona \u00e9 essencial para garantir uma boa experi\u00eancia da pessoa usu\u00e1ria. Um dos recursos mais utilizados \u00e9 o display: none<\/strong><\/em>, que esconde elementos da p\u00e1gina.<\/p>\n

Isso pode ser \u00fatil para diversas situa\u00e7\u00f5es, como esconder menus, se\u00e7\u00f5es ou conte\u00fados din\u00e2micos que voc\u00ea deseja mostrar apenas em alguns momentos. Mas como ele se compara a outras op\u00e7\u00f5es, como visibility: hidden<\/em> e opacity: 0<\/em>? Entenda essas diferen\u00e7as e quando cada uma das propriedades pode ser mais adequada.<\/p>\n

Como usar display: none?<\/h2>\n

O CSS display: none \u00e9 uma propriedade usada para esconder um elemento em uma p\u00e1gina web que pode ser \u00fatil em solu\u00e7\u00f5es de Cloud VPS<\/a> para economizar recursos e otimizar o layout.<\/strong><\/p>\n

Quando ele \u00e9 aplicado, o elemento desaparece completamente e n\u00e3o ocupa espa\u00e7o. Diferentemente de outras propriedades, o comando remove o elemento tanto visualmente quanto da estrutura da p\u00e1gina.<\/strong><\/p>\n

HTML<\/h3>\n

Para usar display: none<\/em> em HTML, basta aplicar essa propriedade diretamente no elemento que voc\u00ea deseja ocultar<\/strong>, seja ao utilizar uma tag <style> no pr\u00f3prio arquivo HTML ou ao vincular a uma folha de estilo externa (CSS).<\/p>\n

Por exemplo, ao definir uma classe no display: none<\/em>, qualquer elemento com essa classe ficar\u00e1 completamente oculto, sem ocupar espa\u00e7o na p\u00e1gina.<\/p>\n

Se aplicado a um par\u00e1grafo, por exemplo, o texto associado a essa classe n\u00e3o ser\u00e1 exibido, e o espa\u00e7o que ele ocuparia tamb\u00e9m desaparecer\u00e1 do layout.<\/p>\n

Para alterar a visibilidade dinamicamente, voc\u00ea pode usar JavaScript para modificar o valor da propriedade display e, assim, mostrar ou esconder o elemento conforme necess\u00e1rio.<\/p>\n

Essa t\u00e9cnica \u00e9 comum em elementos interativos, como menus que aparecem ao clicar em um bot\u00e3o ou se\u00e7\u00f5es que se expandem ou retraem com a intera\u00e7\u00e3o do usu\u00e1rio.<\/p>\n

CSS<\/h3>\n

No CSS, a propriedade display: none<\/em> pode ser aplicada a qualquer elemento da p\u00e1gina<\/strong>, seja por meio de uma folha de estilo externa, uma tag <style> interna ou inline. Ela \u00e9 bastante utilizada em projetos com design responsivo.<\/p>\n

Ao aplicar a classe com display: none<\/em> a um elemento, ele \u00e9 completamente removido do layout e n\u00e3o ocupa espa\u00e7o. Em projetos interativos, essa visibilidade pode ser alternada dinamicamente, por exemplo, com o uso de JavaScript para ocultar ou exibir um elemento quando a pessoa usu\u00e1ria clicar em um bot\u00e3o.<\/p>\n

Outra op\u00e7\u00e3o para esconder um elemento \u00e9 usar visibility: hidden<\/em>, que tamb\u00e9m torna o elemento invis\u00edvel, mas mant\u00e9m o espa\u00e7o que ele ocupa no layout.<\/strong> A diferen\u00e7a \u00e9 que enquanto o display: none remove completamente o elemento, o visibility: hidden<\/em> apenas esconde o conte\u00fado, sem alterar a estrutura da p\u00e1gina.<\/p>\n

O que \u00e9 display:none?<\/h2>\n

O display: none<\/em> \u00e9 uma propriedade do CSS usada para ocultar completamente um elemento de uma p\u00e1gina web<\/strong>. Quando aplicada, o elemento desaparece tanto visualmente quanto da estrutura de layout da p\u00e1gina \u2014 ou seja, ele n\u00e3o ocupa espa\u00e7o, como se nunca estivesse presente no c\u00f3digo.<\/p>\n

Essa \u00e9 uma das maneiras mais eficientes de esconder conte\u00fado, principalmente em situa\u00e7\u00f5es nas quais voc\u00ea n\u00e3o quer que um elemento interfira na organiza\u00e7\u00e3o visual ou no fluxo da p\u00e1gina.<\/p>\n

Quando utilizar?<\/h2>\n

O display: none pode ser \u00fatil em v\u00e1rias situa\u00e7\u00f5es no desenvolvimento web:<\/p>\n