DEV Community

Willane Paiva
Willane Paiva

Posted on

Tipos de display no CSS

#css #dev #frontend #ptbr

A propriedade display define o modo como os elementos irão ser posicionados.

Valores:

1.Block

Posiciona o elemento como se ele fosse um elemento de bloco, ocupando todo o espaço possível. É o padrão de elementos como div e p.

 <div class="example"> <p>Paragrafo 1</p> <p>Paragrafo 2</p> <p>Paragrafo 3<p> </div>
Enter fullscreen mode Exit fullscreen mode

Display block

2.Inline

Posiciona o elemento fazendo-o ocupar o menor espaço possível.

 <div class="example inline"> <p>Paragrafo 1</p> <p>Paragrafo 2</p> <p>Paragrafo 3<p> </div>
Enter fullscreen mode Exit fullscreen mode 
 .example.inline p{ display: inline; }
Enter fullscreen mode Exit fullscreen mode

Display inline

3.Inline-block

Posiciona combinando as propriedade dos display block e inline.

 <div class="example inline-block"> <p>Paragrafo 1</p> <p>Paragrafo 2</p> <p>Paragrafo 3<p> </div>
Enter fullscreen mode Exit fullscreen mode 
 .example.inline-block p { display: inline-block; }
Enter fullscreen mode Exit fullscreen mode

Display inline-block

4.flex

Permite criar um display flexível, considerando por padrão que todos estão em linha, permite definir como os elementos vão ser alinhados tanto verticalmente como horizontalmente e como deve se comporta em casos que não tiver espaço suficiente, além de como deve ser o seu crescimento de acordo com o espaço disponível.

 <div class="example flex"> <p>Paragrafo 1</p> <p>Paragrafo 2</p> <p>Paragrafo 3<p> </div>
Enter fullscreen mode Exit fullscreen mode 
 .example.flex { display: flex; }
Enter fullscreen mode Exit fullscreen mode

Display flex

5.grid

Permite criar display composto por linhas e colunas, sendo possível definir o tamanho de cada espaço e o espaçamento entre eles.

 <div class="example grid"> <p>Paragrafo 1</p> <p>Paragrafo 2</p> <p>Paragrafo 3<p> </div>
Enter fullscreen mode Exit fullscreen mode 
 .example.grid { display: grid; }
Enter fullscreen mode Exit fullscreen mode

Display grid

6.none

Constroi o elemento no dom, mas não o renderiza na página.

 <div class="example none"> <p>Paragrafo 1</p> <p>Paragrafo 2</p> <p>Paragrafo 3<p> </div>
Enter fullscreen mode Exit fullscreen mode 
 .example.none { display: none; }
Enter fullscreen mode Exit fullscreen mode

Display none

Os display block, inline, inline-block e none são aplicados tanto a nivel de elemento como de bloco, enquanto que o flex e grid são aplicados a nivel de bloco.

Todos os exemplos mencionados estão disponiveis no codepen.

Top comments (0)