Layout do CSS - propriedade display

display A propriedade display é a propriedade CSS mais importante para controle do layout.

Propriedade display

display A propriedade define se/como o elemento deve ser exibido.

Cada elemento HTML tem um valor padrão de display, que depende do tipo do elemento. A maioria dos elementos tem como valor padrão de display block ou inline.

Clique para exibir o painel

Este painel contém um elemento <div>, que por padrão está oculto. (display: none

É estilizado pelo CSS e usamos JavaScript para mostrá-lo. (Mudar para display: block

)

Elemento de bloco (block element)

Os elementos de bloco sempre começam uma nova linha e ocupam todo o espaço disponível (tentando estender-se o mais à esquerda e à direita possível).

Este elemento <div> é um elemento de bloco.

  • Alguns exemplos de elementos de bloco:
  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>

<section>

Elemento inline (inline element)

Os elementos inline não começam uma nova linha e ocupam apenas a largura necessária.Este é o parágrafo.

Elemento <span> inline

  • Alguns exemplos de elementos inline:
  • <span>
  • <a>

<img>

display: none; Display: none;

padrão, geralmente usado juntamente com JavaScript para ocultar e exibir elementos sem precisar excluí-los e recriá-los. Se você quiser saber como alcançar esse objetivo, consulte o último exemplo dessa página.<script> O elemento usa display: none;.

Substituir o valor padrão de Display

Como mencionado anteriormente, cada elemento tem um valor padrão de display. No entanto, você pode substituí-lo.

Mudar elementos inline para elementos de bloco e vice-versa, é útil para fazer a página se exibir de uma maneira específica enquanto ainda segue os padrões da Web.

Um exemplo comum é gerar elementos inline para implementar menus horizontais. <li> elemento:

instância

li {
  display: inline;
}

Experimente você mesmo

Atenção:Definir a propriedade display do elemento apenas mudaráa forma de exibir o elementoIsso não altera o tipo do elemento. Portanto, com display: block; Os elementos inline não permitem que outros elementos de bloco sejam incluídos neles.

O exemplo a seguir exibe o elemento <span> como um elemento de bloco:

instância

span {
  display: block;
}

Experimente você mesmo

O exemplo a seguir exibe o elemento <a> como um elemento de bloco:

instância

a {
  display: block;
}

Experimente você mesmo

Ocultar elemento - display: none ou visibility: hidden?

display: none

visibility: hidden

Reset

através de display a propriedade definida como none O elemento pode ser ocultado. O elemento será ocultado e a página será exibida como se o elemento não estivesse presente:

instância

h1.hidden {
  display: none;
}

Experimente você mesmo

visibility: hidden; Também é possível ocultar o elemento.

Mas, o elemento ainda ocupará o mesmo espaço que antes. O elemento será ocultado, mas ainda afetará o layout:

instância

h1.hidden {
  visibility: hidden;
}

Experimente você mesmo

Mais exemplos

Diferenças entre display: none; e visibility: hidden;
Este exemplo demonstra display: none; VS visibility: hidden;
Uso combinado de CSS e JavaScript para exibir conteúdo
Este exemplo demonstra como usar CSS e JavaScript para exibir elementos ao clicar.

Propriedades Display/Visibility CSS

Propriedade Descrição
display Especificar como o elemento deve ser exibido.
visibility Especificar se o elemento deve ser visível.