Definições

display: propriedade CSS que altera a posição dos blocos que forma um layout. O valor padrão na maioria dos elementos HTML é normalmente block ou inline.

block: elemento padrão da maioria dos elementos HTML. O elemento block sempre começa em uma nova linha e se expande pra esquerda e direita o tanto quanto for possível. Sintaxe: display: block; (valor padrão para a maioria dos elementos HTML).

inline: é o elemento de linha padrão. Um elemento de linha pode preencher algum texto dentro de um parágrafo sem quebrar o fluxo daquele parágrafo. Sintaxe: display: inline;

inline-block: exibe um elemento HTML como um contêiner de bloco de nível inline. O interior deste bloco é formatado como caixa de nível de bloco e o elemento em si é formatado como uma caixa de nível in-line. Sintaxe: display: inline-block;

none: elemento que "esconde" um elemento HTML como se não existisse. É normalmente utilizado através do JavaScript para esconder e exibibir elementos HTML sem realmente os remover ou recriar. Sintaxe: display:none;

Obs.: A propriedade display:none é diferente de visibility: hidden, onde o elemento HTML fica invisível, porém permanece ocupando o espaço em que estaria totalmente visível.

HTML

1. Primeiro criamos a <ul> do nosso exemplo:

<ul class="examplo">
        <li id="display1" class="primeiro item">Primeiro bloco</li>
        <li id="display2" class="segundo item">Segundo bloco</li>
        <li id="display3" class="terceiro item">Terceiro bloco</li>
</ul>

CSS

2. Agora vamos criar os estilos para os nossos blocos de renderização para a nossa lista HTML:

.examplo {
    color: #FFF;
    list-style-type: none;
}
.item {
    width: 30%;
    height: 150px;
    margin-bottom: 5px;
    /*display:none;*/   
}
.primeiro {
    background-color: #FAA116;
}
.segundo {
    background-color: #57C7C3;
}
.terceiro {
    background-color: #3B97D3;
}

Observação: Na classe item deixamos o atributo display: none como um comentário (/*display:none;*/), ou seja, o elemento HTML permanecerá como display:block (padrão).

Veja como fica o nosso exemplo mantendo o display padrão:

• Primeiro bloco
• Segundo bloco
• Terceiro bloco

Alterando elementos do atributo "display"

Para visualizar os elementos elimine o comentário (/*) e (*/) do atributo display:none que aparece na classe item. Observe que o elemento HTML não será exibido. Depois substitua o elemento none por, inline, inline-block e block e observe as diferença na utilização de cada um. Clique no link abaixo para fazer os testes:

Tente você mesmo »  

Resultado Final 

Para facilitar a visualização dos elementos do atributo display, montamos um exemplo dinâmico abaixo. Clique nos botões inline, inline-block, none e block e visualize cada uma das posições dos elementos html para cada elemento display:

See the Pen LjMJKQ by Angelo Luis Ferreira (@angeloalf) on CodePen.

Clique no link para visualizar nosso exemplo: Tente você mesmo » 

 COMENTÁRIOS