Neste tutorial vamos mostrar as diferenças em utilizar block, inline, inline-block e none para a propriedade CSS display. A utilização destes elementos é muito importante para o controle visual de um layout.
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:
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 »