Exibição CSS (Exibição)

A propriedade display especifica o tipo de caixa gerada pelo elemento, geralmente usados os valores correspondentes ao display são block, none, inline.

Propriedade de exibição do CSS

A especificação do CSS define o valor padrão de exibição de todos os elementos, por exemplo, o elemento <div> é exibido como bloco, enquanto o elemento <span> é exibido como embutido.

Alterar o valor padrão de exibição

O valor padrão de exibição de cobertura do elemento é um significado importante da propriedade display. Por exemplo, alterar um elemento de nível inline para um elemento de nível bloco, ou alterar um elemento de nível bloco para um elemento de nível inline.

A parte seguinte descreve os valores de exibição do CSS mais comuns.

Exibir Bloco (Block)

O valor block do atributo display força o comportamento do elemento a ser semelhante ablocoelemento, por exemplo<div>ou<p>O elemento. As seguintes regras de estilo<span>e <a>O elemento é exibido como um elemento de bloco:

span {
　　　　display: block;
}
a {
　　　　display: block;
}

Exibir Inline (inline)

O valor inline do atributo display faz com que o comportamento do elemento seja comoinline-levelelemento, por exemplo<span>ou<a>O elemento. As seguintes regras de estilo<p>e <li>O elemento é exibido como um elemento inline-level:

p {
　　　　display: inline;
}
ul li {
　　　　display: inline;
}

Exibir Bloco Inline (inline-block)

inline do atributo display-O valor block faz com que o elemento gere uma caixa retangular, que fluirá com o conteúdo ao redor, ou seja, ficará na mesma linha que o conteúdo adjacente. As seguintes regras de estilo<div>e <span>O elemento é exibido como um bloco inline:

div {
　　　　display: inline-block;
}
span {
　　　　display: inline-block;
}

Não Exibido (none)

Quando o valor da propriedade display é none, o elemento não gera nenhum contorno e não é exibido na página. Os elementos filhos também não geram nenhum contorno, mesmo que seu valor de propriedade de exibição seja não. O documento apresentado parece que o elemento não existe na árvore do documento.

h1　{
　　　　display: none;
}
p {
　　　　display: none;
}