Display Inline, Block e Inline-Block

Quando comecei a estudar HTML e CSS, um dos primeiros projetos que eu acompanhei e desenvolvi foi o de uma barbearia. O projeto faz parte de um dos cursos introdutórios da Alura e, além de nos apresentar as principais tags da estruturação com HTML, também focou no posicionamento dos elementos no CSS através do uso de display: inline, display: block e display: inline-block, apenas.

Eu já tinha usado de maneira bem rasa o display: flex, de forma que, ao me deparar em um projeto em que o posicionamento parecia um pouco mais “travado”, eu tive um pouco de dificuldade.

No entanto, anos depois, o que eu percebo nas comunidades que participo é que essa dificuldade é compartilhada pela grande maioria dos iniciantes. E até mesmo por não haver um bom entendimento do comportamento dos elementos com esses tipos de display, em projetos futuros, sempre tem alguém esbarrando neles e pedindo ajuda para resolver alguma questão.

Então bora lá tentar deixar as coisas um pouco mais claras!

Sumário
O que é o Display
Display: inline
Display: block
Display: inline-block
Conclusão

O que é o Display

Segundo o MDN Web Docs, “a propriedade CSS display identifica o tipo de caixa de renderização usada por um elemento”. Mas o que seria essa caixa de renderização?

Quando você cria uma página HTML, todos os elementos que você criou no seu <body> serão distribuídos na página dentro de “caixas”. Cada “caixa” dessa vai se comportar de um jeito próprio, e esse comportamento é definido pela propriedade display. Experimente inserir bordas nos elementos e você vai ver que todos eles possuem forma retangular. A sua visão vai ser mais ou menos essa aqui:

No Codepen acima: Caixas de renderização de elementos HTML. Em vermelho, elementos do tipo block; em azul, elementos do tipo inline.

Por padrão, os browsers já adicionam a cada elemento um tipo de display específico, que pode ser do tipo, inline (como <span> ou <em>) ou do tipo block (como <div> ou <ul>), na maioria dos casos. Elementos que caracterizam blocos de texto, como <p> ou <h1> também são do tipo block. E para entender o inline-block, você precisa primeiro entender essas duas propriedades.

Display: inline

Elementos com display INLINE, como o próprio nome diz, são elementos que se mantém em linha, ou seja, se você tiver vários elementos com display: inline seguidos, eles se manterão na mesma linha, um do lado do outro. Um bom exemplo é o elemento <span>:

Veja que inserimos um span em algum lugar dentro do parágrafo e colocamos um fundo amarelo para destacá-lo. Mesmo havendo quebra de linhas no HTML, o span mantém o fluxo do texto, sem separá-los em dois elementos distintos. Poderíamos incluir outro span junto a ele, e eles continuariam posicionados em linha:

Veja que ao colocar dois spans um seguido do outro, ainda assim, os elementos se mantiveram lado a lado. Mas há algo mais interessante acontecendo no exemplo acima: no primeiro span, colocamos um margin: 2rem e no segundo span, colocamos um padding: 1rem.

Os elementos com display: inline não aceitam espaçamentos verticais, como margin-top, margin-bottom, padding-top e padding-bottom.

No primeiro span, nós podemos ver que houve o espaçamento horizontal (left e right), mas não houve espaçamento vertical (top e bottom). No segundo span, o espaçamento do padding foi colocado em todos os lados do span, porém as linhas de texto acima e abaixo não foram afastadas por esse espaçamento e houve sobreposição delas com a cor de fundo.

Elementos com display: inline também não aceitam width e height. O tamanho do elemento sempre vai ser definido pelo tamanho do seu conteúdo. Mas você ainda pode mudar o alinhamento vertical de elementos inline de tamanhos diferentes através de propriedade vertical-align.

Display: block

Elementos com display BLOCK, também com um nome bem semântico, são elementos que se comportam como um “bloco” na página, cuja largura sempre vai ocupar 100% da largura do elemento-pai. Se você voltar naquele exemplo que eu dei lá em cima com as bordas coloridas nos elementos das páginas, você pode perceber que todos os elementos do tipo block (bordas vermelhas) estão ocupando toda a largura da tela ou do seu elemento pai, descontando as medidas de padding que foram configuradas.

Aproveitando o mesmo exemplo que demos para elementos inline, o que será que acontece se trocarmos o primeiro span por um h4 e o segundo span por uma div?

Ao fazer a substituição, temos primeiramente o resultado mais óbvio: tanto o h4 quanto a div resultaram em uma quebra de linha, mesmo estando lado a lado no HTML e inseridos no meio do parágrafo. Isso acontece porque esses elementos são do tipo block pelo padrão do navegador, então eles vão ocupar toda a largura que tiverem disponível pra eles.

Os elementos com display: block sempre vão resultar em quebra de linha e sempre herdarão width: 100% por padrão. Margin e padding também são propriedades aceitas por esses elementos.

Mas podemos notar também que o margin que configuramos ao h4 e o padding que colocamos na div são aplicados normalmente a esses elementos, ou seja, elementos do tipo block aceitam medidas verticais, ao contrário do que acontece com elementos do tipo inline.

No exemplo acima, podemos confirmar essa informação: ao atribuir no CSS um height: 100px no h4, conseguimos facilmente mudar a altura do elemento. Mas outra característica dos elementos block é que eles também aceitam width! Isso permite ao desenvolvedor um pouco mais de liberdade na estilização em comparação a elementos inline.

Elementos com display: block aceitam width e height. O posicionamento horizontal do elemento em si pode ser feito através de sua margem: margin: auto centraliza o elemento e margin-left: auto posiciona o elemento à direita, por exemplo. O posicionamento horizontal do conteúdo do elemento pode ser feito com text-align. Já o posicionamento vertical é um pouco mais complicado, podendo ser trabalhado com padding ou line-height.

Display: inline-block

Agora que nós já entendemos como funciona o display: inline e o display: block, podemos ver como funciona o comportamento de elementos com inline-block, que é uma fusão dos dois displays anteriores.

Image description — Eu não podia perder a piada, haha!

Elementos com display INLINE-BLOCK vão se manter posicionados um ao lado do outro, sem quebras de linhas (comportamento herdado do inline), mas te dão a liberdade de atribuir a eles width, height, margins e paddings (comportamento herdado do block). Simples assim! Voltemos ao nosso bloco de exemplo:

Ao atribuirmos ao nosso h4 e à nossa div o display: inline-block, automaticamente eles ficaram posicionados lado a lado. Também diminuímos a _width _de cada um para 30% e, justamente por a div ser inline-block, a quebra de linha foi eliminada e a segunda parte do parágrafo já ficou na mesma linha dos demais.

Elementos com display: inline-block aceitam width e height, bem como margin e padding. O posicionamento horizontal tanto do elemento em si quando do seu conteúdo pode ser feito da mesma forma de um elemento do tipo block. Já o posicionamento vertical pode ser feito da mesma forma de um elemento inline, através de vertical-align.

Conclusão

Embora o CSS já disponha de métodos mais fáceis de posicionar elementos (como display flex e grid, que podemos ver futuramente por aqui), é importante que tenhamos um bom entendimento dos displays padrões dos navegadores pois, muitas vezes, mesmo com o uso de flex e grid, ao trabalharmos com elementos dentro de elementos, alguns destes ainda podem herdar o display padrão caso este não seja substituído pelo desenvolvedor.

Abaixo, segue um breve resumo de todas as explicações dadas nesse artigo:

Este tópico é um assunto constante entre iniciantes nas comunidades de tecnologia das quais participo. Se chegou até aqui, obrigada pela leitura, espero que este artigo lhe tenha sido útil de alguma forma. Um xero!

Fontes:

Blog

Display Inline, Block e Inline-Block

Angela Caldas

O que é o Display

Display: inline

Display: block

Display: inline-block

Conclusão

Join Our Newsletter. No Spam, Only the good stuff.

Related