Pare de chutar e aprenda como funciona o display: inline-block
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:
- Pare de chutar e aprenda como funciona o display: inline
- Pare de chutar e aprenda como funciona o display: block
Nosso desafio é implementar o layout abaixo utilizando 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:
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:
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.
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:
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:
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:
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:
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.
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:
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:
É 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.
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:
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. :-)
