Display Inline, Block e Inline-Block
Tags: braziliandevs, beginners, css, html
Published: 2023-03-02 17:29:28

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](https://www.alura.com.br/curso-online-html5-css3-primeiros-passos) e, além de nos apresentar as principais tags da estruturação com <abbr title="Hyper text markup language">HTML</abbr>, também focou no posicionamento dos elementos no <abbr title="Cascading Style Sheets">CSS</abbr> 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_](#o-que-é-o-display)
> [_Display: inline_](#display-inline)
> [_Display: block_](#display-block)
> [_Display: inline-block_](#display-inlineblock)
> [_Conclusão_](#conclusão)

![Homem sendo coroado Rei do CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sah8k40s3ot3tl7tv1x5.gif)

---

### O que é o Display

Segundo o [MDN Web Docs](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display), “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:

{% codepen https://codepen.io/sucodelarangela/pen/poKJyjV %}

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, <mark>inline</mark> (como `<span>` ou `<em>`) ou do tipo <mark>block</mark> (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 <mark>inline-block</mark>, você precisa primeiro entender essas duas propriedades.

---

### Display: inline

Elementos com display **INLINE**, como o próprio nome diz, são <mark>elementos que se mantém em linha</mark>, 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>`:

![Exemplo de elemento inline](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nuhfy8q3tv556da6sonb.JPG)

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, <mark>o span mantém o fluxo do texto,</mark> sem separá-los em dois elementos distintos. Poderíamos incluir outro **span** junto a ele, e eles continuariam posicionados em linha:

![Exemplo com dois spans lado a lado](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2dyg884ih4x5dd3tj84t.JPG)

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, <mark>cuja largura sempre vai ocupar 100% da largura do elemento-pai.</mark> 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**?

![Exemplo com elementos tipo block](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ugcv1btv3nnmu8jmjqc.JPG)

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**.

![Elementos tipo block com medidas verticais](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zs0y1eunxokk10o5mdjk.JPG)

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.

<figure>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4gn042ttxdgqifgqplxd.gif)
<figcaption>Eu não podia perder a piada, haha!</figcaption>
</figure>
>

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

![Elementos com inline-block](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tkxszkag971effsbwqqi.JPG)

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:

![Tabela comparativa entre displays](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wuxdvb9t0ys4ingeitvp.png)

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:_**
- _[CSS Tricks Almanac: display](https://css-tricks.com/almanac/properties/d/display/)_
- _[CSS Tricks: When do you use inline-block?](https://css-tricks.com/when-do-you-use-inline-block/)_
- _[Origamid: CSS Display inline vs Display block](https://www.origamid.com/codex/css-display-inline-vs-display-block/)_
- _[Marco Bruno: Pare de chutar e aprenda como funciona o display: inline](https://dev.to/collabcode/pare-de-chutar-e-aprenda-como-funciona-o-display-inline-35o)_
- _[Marco Bruno: Pare de chutar e aprenda como funciona o display: block](https://dev.to/collabcode/pare-de-chutar-e-aprenda-como-funciona-o-display-block-169m)_
- _[Marco Bruno: Pare de chutar e aprenda como funciona o display: inline-block](https://medium.com/collabcode/pare-de-chutar-e-aprenda-como-funciona-o-display-inline-block-4e6cba2f19d4)_