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
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
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;
}
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;
}
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;
}
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:
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!