Showing and hiding (display) · Mostrando e ocultando (display)
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Esta página precisa de um navegador recente (com suporte a SharedArrayBuffer). Por favor, atualize Chrome, Edge, Firefox ou Safari para a versão mais recente.
English
How boxes flow
- Some elements are block: they stack on top of each other and fill the width —
<div>,<p>,<h1>. - Some are inline: they sit side by side, taking only as much room as they need —
<span>,<a>,<strong>. displaylets you change which way an element behaves.
Português
Como as caixas fluem
- Alguns elementos são block (bloco): eles empilham uns sobre os outros e preenchem a largura —
<div>,<p>,<h1>. - Outros são inline (inline): ficam lado a lado, ocupando apenas o necessário —
<span>,<a>,<strong>. displaypermite que você mude a forma como um elemento se comporta.
English
display: none
display: none;removes an element from the page completely.- It's how menus, pop-ups, and "read more" sections stay hidden until needed.
- The element is still in your HTML — it just isn't shown.
Português
display: none
display: none;remove um elemento da página completamente.- É assim que menus, pop-ups e seções "leia mais" permanecem ocultos até serem necessários.
- O elemento ainda está no seu HTML — ele apenas não é mostrado.
<style>
.pill { display: inline; background-color: #def; padding: 6px; }
.gone { display: none; }
</style>
<span class="pill">Visible</span>
<span class="gone">You can't see me</span>
English
Common mistakes
display: noneremoves the element and its space;visibility: hiddenkeeps its space.blockstarts a new line;inlinedoes not.
Português
Erros comuns
display: noneremove o elemento e seu espaço;visibility: hiddenmantém seu espaço.blockinicia uma nova linha;inlinenão faz isso.
English
Now you try
display: nonehides;display: blockmakes an element take its own line.- Hide one element, then change how another displays.
Português
Agora você tenta
display: noneesconde;display: blockfaz um elemento ocupar sua própria linha.- Esconda um elemento, depois mude a exibição de outro.
Hide the secret message. Add .secret { display: none; }. · Oculte a mensagem secreta. Adicione .secret { display: none; }.
Make each label sit on its own line. Add .label { display: block; }. · Faça cada rótulo ficar em sua própria linha. Adicione .label { display: block; }.