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
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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: blockVamos 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: inlineO 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-blockEsse 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!