Marco Bruno
Oct 3, 2016 · 13 min read
Se prefere assistir o vídeo em vez de ler, é só dar play :-)

Sem dúvidas a explicação do display: inline-block no curso de FrontEnd da Caelum, está entre as explicações que mais geram dúvidas e questionamentos. Mas acredite, uma vez que você entendeu bem o funcionamento e praticou os valores, inline e block, o caminho para entender o display: inline-block fica muito mais feliz. Ou seja, se você tem alguma dúvida sobre o display: inline ou o display: block, recomendo você dar uma olhada nos dois posts anteriores a este:

Nosso desafio é implementar o layout abaixo utilizando o display: inline-block.

Esse é o nosso desafio com o display: inline-block

Durante todo o post faremos algumas alterações em um código, em seguida entenderemos qual é o impacto que a alteração causou no nosso layout.
Vamos utilizar o HTML e CSSs que estão abaixo, com base em toda a explicação deste post. O código também está disponível no GitHub e CodePen.

HTML (index.html)

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>
Exemplo dos valores inline, block e inline-block
da propriedade display;
</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/displayInlineBlock.css">
</head>
<body>
<ul class="example">
<li class="example-item example-item_first">Primeiro</li>
<li class="example-item example-item_second">Segundo</li>
<li class="example-item example-item_third">Terceiro</li>
</ul>
</body>
</html>

CSS (reset.css)

* {
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: "Open Sans", sans-serif;
}
ul, ol, li {
list-style: none;
}

CSS (displayInlineBlock.css)

.example {
color: #FFF;
}
.example-item {
width: 25%;
height: 150px;
}
.example-item_first {
background-color: #FAA116;
}
.example-item_second {
background-color: #57C7C3;
}
.example-item_third {
background-color: #3B97D3;
}

Por favor, abra o HTML (index.html) no navegador, você vai ter o seguinte resultado:

Nosso layout inicial para implementar nosso desafio

Nós não definimos nenhum valor para a propriedade display de nossas <li>s, então qual é o valor definido pelo navegador para qualquer tag <li>?
É isso aí girl ou man! O navegador define cada elemento <li> como display: block. Por este motivo, cada elemento está um embaixo do outro. Mas para implementarmos o nosso desafio, precisamos deixar os três elementos um do lado do outro. Para fazer isso, é só definir cada tag <li> com o valor inline na propriedade display.

Por favor, abra o nosso CSS (displayInlineBlock.css) e adicione uma linha com display: inline no seletor .example-item:

.example {
color: #FFF;
}
.example-item {
width: 25%;
height: 150px;
display: inline; /* Adicionamos apenas essa linha */
}
.example-item_first {
background-color: #FAA116;
}
.example-item_second {
background-color: #57C7C3;
}
.example-item_third {
background-color: #3B97D3;
}

Volte até o seu navegador onde você abriu o nosso index.html e atualize a página. Você terá um layout similar a este:

Nosso layout após definir o valor como display: inline

Infelizmente nosso layout atual não está igual ao nosso desafio. Pelo resultado do layout, podemos perceber que os elementos (<li>) ficaram um do lado do outro, mas sem a largura (width: 25%) e altura (height: 150px) que definimos no seletor .example-item. Esse é exatamente o comportamento quando utilizamos o display: inline -- lembre-se que temos um post explicando o display: inline.
Para conseguirmos definir uma largura (width) e uma altura (height) para cada uma das nossas <li>s, é necessário que todas elas tenham o valor block na propriedade display, ou seja, acabamos de cair em um impasse. É desse impasse que nasceu o display: inline-block.

Por favor, abra novamente o nosso CSS (displayInlineBlock.css) e troque o valor da propriedade display que acabamos de adicionar para inline-block:

.example {
color: #FFF;
}
.example-item {
width: 25%;
height: 150px;
display: inline-block; /* Alteramos de inline para inline-block */
}
.example-item_first {
background-color: #FAA116;
}
.example-item_second {
background-color: #57C7C3;
}
.example-item_third {
background-color: #3B97D3;
}

Agora vá até o navegador e atualize nossa página. O seu layout deve estar com o resultado abaixo, se não estiver, me adicione nas redes sociais da vida ou faça um comentário no post que eu te ajudo. Ah! Para me achar nas redes sociais é fácil, uso tudo como @marcobrunobr.

Aí sim. Agora conseguimos deixar na mesma linha, com largura (width) e altura (height) definida

Show! Agora estamos mais perto de implementar nosso desafio.

Esse é o momento que devemos parar de chutar e entender como funciona a propriedade display: inline-block. O próprio nome (inline-block) já mostra para nós que é a junção dos comportamentos dos valores inline + block. Abaixo explicarei detalhadamente os comportamento dessa propriedade.

Com display: inline-block nós conseguimos definir uma largura (width) e altura (height) da mesma forma que conseguimos com o display: block, esse é o único comportamento que o inline-block herda do block.


Também conseguimos deixar um elemento do lado do outro, vulgo mesma linha, da mesma forma que fazemos com o display: inline, mas esse não é o único comportamento que o inline-block herda do inline.


Quando um elemento é definido como display: inline-block ele também ganha o comportamento de uma palavra, esse é o segundo comportamento que herdamos do display: inline. Vamos alterar um pouco o nosso CSS e HTML para entender um pouco melhor o que eu quero dizer com comportamento de uma palavra.

Por favor abra o seu HTML (index.html) e após a </ul> adicione um parágrafo com um lorem, da mesma forma que o código abaixo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>
Exemplo dos valores inline, block e inline-block
da propriedade display;
</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/displayInlineBlock.css">
</head>
<body>
<ul class="example">
<li class="example-item example-item_first">Primeiro</li>
<li class="example-item example-item_second">Segundo</li>
<li class="example-item example-item_third">Terceiro</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem in laboriosam facilis a ad quisquam laudantium odit dignissimos, totam perferendis illum, nobis doloribus dolore reiciendis optio expedita, obcaecati repellat sint?
</p>

</body>
</html>

Assim que você atualizar o navegador terá o seguinte resultado:

Com esse parágrafo adicionado, fica mais fácil entender o que estou querendo dizer com: "as tags que são definidas com display: inline-block ganham o comportamento de uma palavra".

Qual é a propriedade do CSS e valor dela que você utiliza para deixar o texto alinhado a direita? A propriedade que podemos utilizar é o text-align com o valor right. Vamos ver se essa propriedade funciona de fato.
Abra o nosso CSS (displayInlineBlock.css). Nele crie um seletor para pegar a nossa tag <p> e aplique o text-align: right:

.example {
color: #FFF;
}
.example-item {
width: 25%;
height: 150px;
display: inline-block;
}
.example-item_first {
background-color: #FAA116;
}
.example-item_second {
background-color: #57C7C3;
}
.example-item_third {
background-color: #3B97D3;
}
p {
text-align: right; /* Criamos esse seletor */
}

Vá até seu navegador e atualize nossa index.html:

Tá lá, o texto dentro do parágrafo foi para o lado direito bem de boas

Muito bom. A propriedade text-align realmente consegue mudar o comportamento das palavras que estão dentro de um parágrafo.

Voltando um pouco atrás nós vimos que os elementos que são definidos como display: inline-block, se comportam como uma palavra. Ou seja, se nossas tags <li> são as palavras, em qual elemento precisamos adicionar o text-align: right para deixarmos nossas três <li>s alinhadas à direita?

É isso aí. Se cada <li> é uma palavra, nossa tag <ul> é como se fosse a tag <p>. Por isso que a propriedade text-align: right tem que ser aplicada na tag <ul>. Vamos ver se isso funciona. Abra o nosso CSS (displayInlineBlock.css) e no seletor .example:

.example {
color: #FFF;
text-align: right; /* Adicionamos essa linha */
}
.example-item {
width: 25%;
height: 150px;
display: inline-block;
}
.example-item_first {
background-color: #FAA116;
}
.example-item_second {
background-color: #57C7C3;
}
.example-item_third {
background-color: #3B97D3;
}
p {
text-align: right;
}

Atualize o navegador e veja se nossas três <li>s estão deslocadas para o lado direito:

Agora sim, parece que tudo está funcionando

Da mesma forma que conseguimos alinhar as três <li>s para o lado direito com o text-align: right, nós podemos deixá-las centralizadas alterando o valor do text-align para center. Abra o CSS (displayInlineBlock.css) e altere o valor dos dois text-align para center:

.example {
color: #FFF;
text-align: center; /* Alteramos de right para center */
}
.example-item {
width: 25%;
height: 150px;
display: inline-block;
}
.example-item_first {
background-color: #FAA116;
}
.example-item_second {
background-color: #57C7C3;
}
.example-item_third {
background-color: #3B97D3;
}
p {
text-align: center; /* Alteramos de right para center */
}

Atualizando o navegador teremos todas as tags <li> e o conteúdo do nosso parágrafo centralizados:

Tanto o paragrafo quando nossas lis estão centralizadas

O text-align tem mais um valor: justify. Vamos usar ele também em nossa <ul> e <p>. Abra o CSS (displayInlineBlock.css) e troque o valor dos nossos text-align de center para justify:

.example {
color: #FFF;
text-align: justify; /* Trocado o valor de center para justify */
}
.example-item {
width: 25%;
height: 150px;
display: inline-block;
}
.example-item_first {
background-color: #FAA116;
}
.example-item_second {
background-color: #57C7C3;
}
.example-item_third {
background-color: #3B97D3;
}
p {
text-align: justify; /* Trocado o valor de center para justify */
}

Antes de atualizar o navegador para ver o resultado, abriremos o nosso HTML (index.html) e colocaremos um pouco mais de texto dentro da nossa tag <p>:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>
Exemplo dos valores inline, block e inline-block
da propriedade display;
</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/displayInlineBlock.css">
</head>
<body>
<ul class="example">
<li class="example-item example-item_first">Primeiro</li>
<li class="example-item example-item_second">Segundo</li>
<li class="example-item example-item_third">Terceiro</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem in laboriosam facilis a ad quisquam laudantium odit dignissimos, totam perferendis illum, nobis doloribus dolore reiciendis optio expedita, obcaecati repellat sint? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem in laboriosam facilis a ad quisquam laudantium odit dignissimos, totam perferendis illum, nobis doloribus dolore reiciendis optio expedita, obcaecati repellat sint? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem in laboriosam facilis a ad quisquam laudantium odit dignissimos, totam perferendis illum, nobis doloribus dolore reiciendis optio expedita, obcaecati repellat sint?
</p>
</body>
</html>

Pronto! Agora vamos até o nosso navegador dar uma atualizada nele para ver o resultado que a alteração do código fez no layout:

O texto ficou justificado mas as nossas lis não :-(

Parece que o justify não funcionou para nossas <li>s. Triste! :-(
Vamos analisar, deve ter um porquê. O nosso parágrafo ficou com todo o texto justificado exceto a última linha. Sacou o por quê de nossas <li>s não estarem justificadas?
Se não entendeu tranquilo, vamos alterar um pouco nossos HTML (index.html) que você vai pegar o motivo de nossas <li>s "não aceitarem" o justify. Por favor, abra o HTML (index.html) e adicione mais 3 <li>s na nossa <ul>:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>
Exemplo dos valores inline, block e inline-block
da propriedade display;
</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/displayInlineBlock.css">
</head>
<body>
<ul class="example">
<li class="example-item example-item_first">Primeiro</li>
<li class="example-item example-item_second">Segundo</li>
<li class="example-item example-item_third">Terceiro</li>
<li class="example-item example-item_first">Primeiro</li>
<li class="example-item example-item_second">Segundo</li>
<li class="example-item example-item_third">Terceiro</li>

</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem in laboriosam facilis a ad quisquam laudantium odit dignissimos, totam perferendis illum, nobis doloribus dolore reiciendis optio expedita, obcaecati repellat sint? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem in laboriosam facilis a ad quisquam laudantium odit dignissimos, totam perferendis illum, nobis doloribus dolore reiciendis optio expedita, obcaecati repellat sint? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem in laboriosam facilis a ad quisquam laudantium odit dignissimos, totam perferendis illum, nobis doloribus dolore reiciendis optio expedita, obcaecati repellat sint?
</p>
</body>
</html>

Vamos adicionar um margin-bottom de 10px em todas as <li>s para ficar mais fácil de entender o que está acontecendo com nossas <li>s. Nosso CSS (displayInlineBlock.css) tem que ficar assim:

.example {
color: #FFF;
text-align: justify;
}
.example-item {
width: 25%;
height: 150px;
display: inline-block;
margin-bottom: 10px; /* Adicionamos essa linha */
}
.example-item_first {
background-color: #FAA116;
}
.example-item_second {
background-color: #57C7C3;
}
.example-item_third {
background-color: #3B97D3;
}
p {
text-align: justify;
}

Agora sim! Atualizando o seu navegador você terá o resultado abaixo. Se não acontecer isso, lembre-se que você pode adicionar um comentário ou me pentelhar pelas redes socias da vida.

Vixi! Agora as três primeiras lis estão justificadas e as demais não. Por que?

Eita. Agora que adicionamos mais três <li>s, as três primeiras estão justificadas, mas as três últimas não.
Se olharmos o texto dentro do parágrafo está acontecendo a mesma coisa, todas as linhas estão justificadas menos a última. Esse é exatamente o comportamento que o justify implementa. Ele justifica todas as linhas com exceção da última. Ou seja, as últimas três <li>s que acabamos de adicionar se tornaram a última linha e elas permitiram que as três primeiras <li>s ficassem justificadas.

Estamos quase conseguido implementar o nosso desafio, mas ele não tem o parágrafo e nem essas últimas três <li>s que acabamos de implementar. Vamos remover o nosso parágrafo e as últimas três <li>s do nosso HTML (index.html):

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>
Exemplo dos valores inline, block e inline-block
da propriedade display;
</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/displayInlineBlock.css">
</head>
<body>
<ul class="example">
<li class="example-item example-item_first">Primeiro</li>
<li class="example-item example-item_second">Segundo</li>
<li class="example-item example-item_third">Terceiro</li>
</ul>
</body>
</html>

Antes de ir até o navegador, vamos remover o seletor da tag <p> e a propriedade margin-bottom que está no seletor .example-item. Vamos abrir o nosso CSS (displayInlineBlock) e fazer essas alterações:

.example {
color: #FFF;
text-align: justify; /* Não remova o justify */
}
.example-item {
width: 25%;
height: 150px;
display: inline-block;
}
.example-item_first {
background-color: #FAA116;
}
.example-item_second {
background-color: #57C7C3;
}
.example-item_third {
background-color: #3B97D3;
}

Muito bom! Agora podemos ir até o navegador e ver como está o nosso layout:

Caramba parou de funcionar o justify novamente

Que m#Ω@! O text-align: justify parou de funcionar novamente. Lembra que o comportamento do justify, é justificar todas as linhas menos a última? :-)

Como temos apenas uma linha, ela é a primeira e também a última, por isso que ela não está justificada. Para resolver esse problema precisamos adicionar uma última linha e fazer com que ela não apareça para o usuário.
Felizmente conseguimos fazer isso apenas com CSS, utilizando o seletor de pseudo-element :after.
Vamos ver como o :after funciona na prática. Abra o seu CSS (displayInlineBlock.css) e adicione um :after na nossa <ul>, da mesma forma que está no código abaixo:

.example {
color: #FFF;
text-align: justify;
}
.example:after { /* Adicionamos esse seletor */
content: 'Ω…¬˚∆ø¥åß';
color: red;
}
.example-item {
width: 25%;
height: 150px;
display: inline-block;
}
.example-item_first {
background-color: #FAA116;
}
.example-item_second {
background-color: #57C7C3;
}
.example-item_third {
background-color: #3B97D3;
}

Atualize o seu navegador e bora entender com o funciona o :after. Nosso layout estará assim:

Conseguimos adicionar texto pelo CSS :-)

É isso aí conseguimos adicionar texto pelo CSS -- só faça isso se o texto que você for adicionar, é apenas um atrativo visual. Conteúdo tem que ficar no HTML.

O :after adiciona um elemento dentro da tag que informamos no seletor e esse elemento sempre será o último dentro desta tag. Por exemplo, no nosso código implementamos o :after assim: .example:after.
A nossa <ul> é o elemento que tem a classe example, portanto será criado dentro da nossa <ul> um pseudo-element com o valor que está sendo atribuído na propriedade content. Esse pseudo-element será criado sempre como último elemento da <ul>.

Agora precisamos que esse último elemento que adicionamos com o :after, seja também a última linha. Bom, para fazermos isso, precisamos definir a largura dele como 100% (width: 100%) e por segurança deixá-lo com a altura zerada (height: 0). Também precisamos alterar o display dele para inline-block porque o padrão dele é inline -- lembre-se que quando um elemento é display: inline nós não conseguimos definir largura (width) e nem altura (height) para ele. Bora colocar esse comportamento no nosso CSS (displayInlineBlock.css):

.example {
color: #FFF;
text-align: justify;
}
.example:after {
content: 'Ω…¬˚∆ø¥åß';
color: red;
display: inline-block; /* Adicionando essa linha, */
width: 100%; /* essa também */
height: 0; /* e essa foi a última */

}
.example-item {
width: 25%;
height: 150px;
display: inline-block;
}
.example-item_first {
background-color: #FAA116;
}
.example-item_second {
background-color: #57C7C3;
}
.example-item_third {
background-color: #3B97D3;
}

Atualize seu navegador, espero que fique tão feliz quando eu.

Caraca. Primeira linha justificada.

Aí sim estamos com a primeira linha justificada. Agora só precisamos sumir com aqueles símbolos bacanas que adicionamos por CSS. Volte no CSS (displayInlineBlock.css) e deixe o valor da propriedade content sem valor definido e remova a propriedade color: red, conforme o código abaixo:

.example {
color: #FFF;
text-align: justify;
}
.example:after {
content: ''; /* Removemos os símbolos */
display: inline-block;
width: 100%;
height: 0;
}
.example-item {
width: 25%;
height: 150px;
display: inline-block;
}
.example-item_first {
background-color: #FAA116;
}
.example-item_second {
background-color: #57C7C3;
}
.example-item_third {
background-color: #3B97D3;
}

Essa será a última vez que você vai atualizar o seu navegador para ver o resultado do layout:

Aí está o nosso desafio finalizado :-)

FINALMENTE! :-)
Espero que tenha gostado de como expliquei o display: inline-block. Qualquer dúvida, sugestão, reclamação, realmente qualquer coisa que queira falar ou me perguntar, por favor fale. Sempre quero ouvir o que vocês têm para falar, é com as opiniões de vocês que eu melhoro.
Obrigado pela paciência de ler até o fim. Até o próximo post que será sobre float: left | right.

Ah! Esse é um post de uma série de post que estou escrevendo. No primeiro post da série tem uma lista das propriedades que vou escrever e os que eu escrevi estão com link. :-)

CollabCode

Aqui é o ponto de encontro entre quem quer aprender e quem pode ensinar, de forma colaborativa.

Marco Bruno

Written by

Migrei de palhaço para Dev. Front-End/UX e agora eu trabalho como streamer de código, instrutor e dev na CollabCode

CollabCode

Aqui é o ponto de encontro entre quem quer aprender e quem pode ensinar, de forma colaborativa.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade