3
respostas

Display

Gostaria de uma explicação mais detalhada sobre as opções de Display: inline, block e inline-block. A explicação da aula não me foi suficiente.

Obrigado

3 respostas

Olá, boa noite.

Display: block

Vamos começar com o display: block, que é o padrão para a maioria dos elementos. O display block faz o elemento ocupar o espaço de sua linha inteira. Ex:

<p>Ocupo a linha toda!</p>
p {
    display: block;
    background-color: #f00;
}

Print de um elemento HTML ocupando a linha toda.

Como eu disse, block é o formato de display padrão pra maioria dos elementos HTML, então não há necessidade de colocar ele, a div é um exemplo. O block também permite mechermos com width e height.

Display: inline

O display: inline, ao contrário do block, faz o elemento ocupar somente o tamanho de seu conteúdo, somente o necessário para que seu conteúdo caiba na página. Por exemplo:

<p>Não ocupo a linha toda!</p>
p {
    display: inline;
    background-color: #f00;
}

Print de um elemento HTML ocupando somente o tamanho de seu conteúdo.Além de ocupar somente o espaço de seu conteúdo, o inline não permite que modifiquemos as propriedades width e height. O inline está presente em poucos elementos como padrão, um exemplo é a Âncora (<a href="#"></a>).

display: inline-block

Esse display, que na minha opinião é super útil em vários casos, junta a possibilidade de podermos mecher com a width e o height do display: block, com a característica padrão do display: inline que faz os elementos ocuparem somente o espaço de seu conteúdo. Exemplo:

<p>Ocupo meu espaço e meu tamanho pode ser alterado!</p>
p {
    display: inline-block;
    background-color: #f00;
    width: 64px;
}

Print de um elemento HTML ocupando somente o tamanho de seu conteúdo, tendo sua largura alterada.

Um exemplo de elemento que utiliza esse display com padrão é o input. Ele pode ser bem útil quando queremos, por exemplo, que a âncora continue ocupando somente seu espaço mas precisamos mecher com a width e o height.

Pra finalizar, uma imagem que resume esses três displays: Três elementos p com cada um dos displays descreditos acima.

Código usado:

<p style="display: block; background-color: #f00;">display: block;</p>
<br/>
<p style="display: inline; background-color: #f00;">display: inline;</p>
<br/>
<p style="background-color: #f00; display: inline-block; width: 64px">display: inline-block</p>

Se quiser saber mais sobre o display, acesse a página da MDN que fala sobre o display.

Espero que tenha ajudadado!

A explicação do colega Júlio foi excelente. O Tópico merece ser resolvido com esta resposta. Parabéns, Júlio.

obrigado!