Embedded Files
Informática 2026: Seg-Qua-Sex – 13h30 às 16h50 / Terça e Quinta: 8h30 às 11h30 ou 13h30 às 16h50 / Web Designer: Seg-Qua-Sex – 8h30 às 11h30
Entender a propriedade display é o primeiro passo para dominar a forma como os elementos se comportam em uma página web. Essa propriedade define o tipo de "caixa" que o elemento gera, controlando como ele se posiciona em relação aos seus vizinhos e como você pode manipular suas dimensões. Por padrão, todo elemento HTML já nasce com um valor para display, geralmente block ou inline.
Display: block
Display: block
Elementos com display: block criam uma "caixa" que ocupa toda a largura disponível. Eles forçam uma quebra de linha antes e depois de si mesmos, como se estivessem em um bloco isolado.
Comportamento: Cada elemento fica em sua própria linha, um abaixo do outro.
Controle de Dimensões: Permite definir width (largura) e height (altura).
Exemplos Comuns: div, p, h1, ul, header, footer.
Pense em um elemento block como um parágrafo de texto: ele ocupa toda a linha, e o próximo parágrafo começa em uma nova linha abaixo.
Display: inline
Display: inline
Elementos com display: inline geram uma "caixa" que se ajusta ao conteúdo, fluindo na mesma linha que os elementos vizinhos. Eles não forçam quebras de linha.
Comportamento: Os elementos ficam lado a lado, enquanto houver espaço na linha.
Controle de Dimensões: Não permite definir width ou height. A largura e a altura são definidas automaticamente pelo conteúdo.
Exemplos Comuns: span, a, strong, em.
Pense em um elemento inline como uma palavra em um texto: ela fica ao lado de outras palavras na mesma linha.
Display: inline-block
Display: inline-block
Este valor é a combinação perfeita entre block e inline. Ele permite que os elementos fiquem lado a lado como os inline, mas dá a você o poder de definir suas dimensões como os block.
Comportamento: Os elementos ficam um ao lado do outro, como em inline.
Controle de Dimensões: Permite definir width e height.
Uso Ideal: É perfeito para elementos como ícones, botões ou cards que precisam ter dimensões fixas, mas que devem ser exibidos um ao lado do outro.
Display: none
Display: none
Diferente dos outros valores, display: none remove completamente o elemento da página. Ele não é apenas invisível, mas também não ocupa nenhum espaço no layout. O elemento simplesmente "desaparece" do fluxo da página.
Uso Comum: Para esconder elementos dinamicamente com JavaScript, como em menus retráteis ou modais.
Google Sites
Report abuse