Neste tutorial de CSS, vamos explorar a fundo outros valores fundamentais da propriedade display no CSS — como none, inline-block, list-item e a família de valores table. Se você quer ter controle total sobre como os elementos HTML aparecem e se comportam na tela do navegador, este guia é o seu mapa da mina.
A Propriedade CSS - display
A propriedade CSS display é o mecanismo central que define como um elemento HTML é renderizado no layout da página. Ela altera o comportamento visual no **DOM**, permitindo transformar elementos em blocos, itens em linha, ocultá-los com display: none ou alinhá-los lado a lado com inline-block.
Em nosso artigo passado sobre a propriedade display do CSS - Elementos inline e block, introduzimos a ideia básica do display (que em inglês significa exibir ou mostrar). Ela dita o fluxo de renderização de cada caixa visual (box model) na viewport do usuário.
Aprendemos dois conceitos cruciais: inline e block. Eles representam o comportamento padrão das tags HTML, que você pode alterar facilmente adicionando os códigos display: inline e display: block na sua folha de estilos CSS.
Basicamente, os elementos que têm display: block por padrão são aqueles renderizados no browser como um bloco maciço, ocupando toda a largura disponível e forçando uma quebra de linha acima e abaixo. Exemplos clássicos são as tags de cabeçalho (<h1> a <h6>), parágrafos (<p>) e divisões (<div>).
Já os elementos do tipo display: inline fluem junto com o texto. Eles não provocam quebras de linha e aceitam outros elementos adjacentes na mesma horizontal. Exemplos comuns incluem a tag de negrito (<b>), itálico (<i>) e <span>.
inline ignoram as propriedades CSS width e height! Se você definir largura ou altura para uma tag <span> com display: inline, o navegador simplesmente ignorará as dimensões. É aqui que entra o poder do inline-block que veremos a seguir.
Para mais detalhes, exemplos e códigos completos, confira o tutorial sobre display inline e block que indicamos no início desta aula. Agora, vamos elevar o nível e estudar os outros valores essenciais dessa propriedade!
A propriedade CSS display: none
À primeira vista, a função do display: none pode parecer um pouco estranha ou até contraditória: ela simplesmente **esconde por completo** o elemento da página. O elemento deixa de ser exibido e não ocupa espaço algum no layout visual.
Experimente testar o código HTML abaixo, onde criamos dois parágrafos. O primeiro é um parágrafo normal. No segundo, aplicamos a propriedade display com o valor none:
<p>Tutorial de CSS - Curso HTML Progressivo</p>
<p style="display: none;">Este parágrafo somente webmasters que sabem CSS vão ver :)</p>Ao salvar e rodar esse documento no seu navegador, você notará que apenas o primeiro parágrafo é visível na tela. O segundo parágrafo sumiu como mágica!
Tutorial de CSS - Curso HTML Progressivo
Mas afinal, por que diabos usaríamos um código para esconder algo que escrevemos no HTML? A resposta é: **Interatividade e Programação Front-End** (especialmente combinada com JavaScript).
Imagine um menu sanfona (accordion), uma janela modal ou um menu dropdown: inicialmente o conteúdo fica escondido com display: none. Quando o usuário clica num botão ou passa o mouse por cima, o JavaScript altera dinamicamente essa regra CSS para display: block ou display: inline-block, fazendo o elemento aparecer instantaneamente!
Não confunda
display: none com visibility: hidden!
- display: none remove o elemento do fluxo visual completamente. O navegador ignora a largura e altura dele no layout.
- visibility: hidden torna o elemento invisível, mas o elemento continua ocupando seu espaço físico na tela, deixando um "buraco em branco" onde ele estaria.
Usaremos essa técnica com frequência em nossos cursos avançados para criar efeitos fantásticos sem complicação!
🚀 Domine o Front-End Sem Depender da Internet!
Você quer aprender HTML e CSS de verdade, com uma didática passo a passo, centenas de exemplos práticos e sem anúncios atrapalhando sua leitura?
"Estava travado tentando entender as regras de layout no CSS, essa apostila organizada em PDF salvou meus estudos e projetos!" — Carlos V., Desenvolvedor Web
Propriedade CSS display: inline-block
Como o próprio nome sugere, o valor inline-block da propriedade display CSS é o melhor dos dois mundos: uma fusão perfeita entre os comportamentos de inline e de block.
Quando definimos um elemento como display: inline-block, ele se comporta visualmente na página como se fosse inline (permanecendo lado a lado com outros elementos na mesma linha, sem quebras automáticas). Porém, **por dentro**, ele se comporta como um block — ou seja, aceita que você defina width, height, margin e padding livremente!
Vamos demonstrar isso na prática. Vamos criar uma <div> com a classe meuBloco:
<body>
Este texto vem antes do bloco 'meuBloco'
<div class="meuBloco">
Este é um bloco comum com texto.<br />
É uma div (block por default).<br />
Porém, está como display: inline-block;<br />
Logo, se comportará como inline.<br />
</div>
Este texto vem depois do bloco 'meuBloco'. <br />
Notaram como a div se comporta como se fosse inline?
</body>Agora aplicaremos a regra CSS no arquivo de estilos para ativar essa propriedade:
.meuBloco {
border: 2px solid #2563eb;
display: inline-block;
padding: 10px;
}Confira a imagem original do resultado que geramos para esta demonstração:
É uma div (block por default).
Porém, está como display: inline-block;
Logo, se comportará como inline.
Propriedade CSS display: list-item
Ao utilizar o valor list-item na propriedade display, você indica ao navegador que aquele elemento deve ser renderizado exatamente como se fosse um item de lista (semelhante à tag <li> que aprendemos em nossa aula sobre Formatação de Textos em HTML e CSS).
Isso significa que o navegador adicionará automaticamente um marcador visual (o famoso bullet point) ao lado do elemento. Não importa se a tag original é uma <div>, um <p> ou um <span>: ao aplicar display: list-item, ela ganha marcadores e margens de lista!
<div style="display: list-item; margin-left: 30px;">
Eu sou uma DIV, mas me comporto como um item de lista!
</div>Propriedade CSS display: table e Comportamento de Tabelas
Da mesma forma que podemos transformar qualquer elemento em item de lista, o CSS nos permite transformar qualquer tag HTML para que ela aja estruturalmente como uma tabela tradicional.
Ao definir display: table em uma <div>, o navegador a renderiza com o mesmo modelo de caixa de uma tag <table> nativa do HTML.
Evolução da Web: Layout com Tabelas vs Flexbox e Grid
No início do desenvolvimento web (anos 90 e 2000), os webmasters usavam a tag <table> para construir todo o layout de um site. Isso criava um código sujo, inflexível e péssimo para leitores de tela e SEO.
Com a chegada do CSS moderno, migramos para display: table e, posteriormente, para revoluções reais como Flexbox e CSS Grid. Hoje em dia, tabelas devem ser usadas unicamente para dados tabulares reais. Para entender a documentação completa dos tipos de display, recomendamos consultar a documentação oficial da MDN Web Docs sobre display.
Valores de Display para Elementos de Tabela
Se você precisar construir estruturas de tabela dinâmicas sem usar as tags HTML engessadas, o CSS oferece uma família inteira de valores para a propriedade display:
display: table(simula a tag<table>)display: table-row(simula a linha<tr>)display: table-cell(simula a célula<td>)display: table-caption(simula o título da tabela<caption>)display: table-column(simula a coluna<col>)display: table-column-group(simula o grupo<colgroup>)display: table-header-group(simula o cabeçalho<thead>)display: table-footer-group(simula o rodapé<tfoot>)display: table-row-group(simula o corpo<tbody>)
Aprofundaremos mais sobre styling e estruturas em nossos tutoriais completos sobre tabelas em CSS!
🎁 Leve Todos os Cursos com o MEGA PACK Progressivo!
Por que se limitar apenas ao HTML e CSS? Adquira o pacote completo que inclui nossas apostilas consagradas de HTML, CSS, JavaScript, PHP, Python, C, C++ e Java!
❓ Perguntas Frequentes sobre a Propriedade CSS Display
1. Qual é a diferença prática entre display: inline e display: inline-block?
inline fluem na horizontal, mas não aceitam definição manual de width e height. Já o inline-block permanece lado a lado com outros elementos, porém permite definir largura, altura, margens e preenchimentos normalmente.
2. O display: none exclui o elemento do HTML permanentemente?
display: none apenas orienta o motor de renderização do navegador a ocultar visualmente o elemento e remover seu espaço no layout.
3. Por que o display: inline-block deixa um pequeno espaço/lacuna em branco entre as caixas?
font-size do pai ou utilizar layouts modernos com **CSS Flexbox**.
4. Ainda vale a pena usar display: table em layouts modernos?
display: table-cell ainda pode ser útil em soluções legadas de alinhamento vertical rápido.
📚 O que estudar a seguir no Portal Programação Progressiva:
- Próximo Artigo Recomendado 1: Entendendo a Propriedade CSS
visibility: hiddene Diferenças do Display - Próximo Artigo Recomendado 2: Guia Completo do Modelo de Caixas (CSS Box Model): Margin, Border e Padding
- Próximo Artigo Recomendado 3: Introdução Prática ao Flexbox: Esqueça os Hacks do Passado!
Nenhum comentário:
Postar um comentário