Pare de chutar e aprenda como funciona o display: inline
Nas minhas últimas turmas do curso de FrontEnd da Caelum, acabei mudando a explicação das propriedades display: inline; display: block; e display: inline-block;. Nesse post, e nos que vou fazer em sequência, tentarei transformar essa nova explicação em texto. Bora lá para este desafio :-)
Para deixar a explicação mais simples e feliz, vamos pensar que temos 3 tags <li> dentro de uma <ul>. Todas <li> vão ter 150px de altura (height: 150px) e a largura vai ser de 33.333% (width: 33.333%). Ah! A primeira <li> será da cor laranja (background-color: #FAA116), a segunda da cor verde (background-color: #57C7C3) e a terceira, e última, da cor azul (background-color: #3B97D3).
Se quiser ir acompanhando passo a passo as explicações, você pode copiar o HTML e os CSSs abaixo, ou acessar os códigos pelo GitHub ou 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: 33.333%;
height: 150px;
}
.example-item_first {
background-color: #FAA116;
}
.example-item_second {
background-color: #57C7C3;
}
.example-item_third {
background-color: #3B97D3;
}
O resultado desse código no navegador deve ficar parecido com:
Agora que temos um código de exemplo, vamos estudar os 3 valores (inline, block e inline-block) da propriedade display. Para tentar não deixar uma explicação chata, colocarei alguns desafios de como posicionar os elementos na tela e a ideia é discutirmos sobre quais dos 3 valores podemos utilizar.
Nosso primeiro desafio é colocar um elemento do lado do outro, dessa maneira:
Quando estava começando como Desenvolvedor FrontEnd, meu primeiro chute era colocar nas 3 <li> a propriedade display com o valor inline. Depois era só rezar para que os elementos ficassem um do lado do outro conforme a imagem acima.
Vamos implementar o display: inline; para todas as tags <li> no nosso arquivo CSS (displayInlineBlock.css), ele ficará assim:
.example {
color: #FFF;
} .example-item {
width: 33.333%;
height: 150px;
display: inline; /* Só adicionamos essa linha. */
}
.example-item_first {
background-color: #FAA116;
}
.example-item_second {
background-color: #57C7C3;
}
.example-item_third {
background-color: #3B97D3;
}
Após alterar o CSS, dê uma atualizada no seu navegador. Você verá que o resultado não foi muito feliz:
Mas tudo bem, esse é um comportamento esperado quando utilizamos o display: inline;. Agora vamos dar uma pausa nos chutes e entender como funciona essa propriedade.
Como funciona o display: inline; ?
O valor inline permite que os elementos fiquem um do lado do outro -- essa é a parte simples de perceber.
Nós temos definido uma largura e uma altura para todas as <li> em nosso código, mas as propriedades width e height não funcionaram. Esse também é um comportamento do inline. Os elementos com inline não aceitam largura (width), nem altura (height), o tamanho do elemento é definido pelo conteúdo que ele contém.
Os dois pontos acima do comportamento que comentei, juntos são o básico que precisamos saber sobre o inline. Mas temos mais um ponto que precisamos dar uma olhada…
…Nós não definimos nenhum respiro entre os elementos, mas tem algum tipo de margin entre eles. Poderia ser uma margin que o navegador colocou por conta própria mas, dado que nós temos um reset.css que está zerando e tirando a margin, padding e border de todos as tags, isso também não é possível.
Por que tem esses espaços entre tags que possuem a propriedade display: inline?
Esses espaços existem porque o elemento com display: inline, ganha o comportamento de uma palavra. Além dos outros dois pontos que citamos acima.
O que estou querendo dizer com "comportamento de uma palavra"?
Para explicar um pouco melhor o comportamento de uma palavra, vamos adicionar um <h1> com os mesmo conteúdo das nossas tags <li> no nosso HTML:
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>
<h1 class="title">
Primeiro
Segundo
Terceiro
</h1>
</body>
</html>
Repare que as palavras dentro do <h1> estão separadas por um [ENTER], da mesma forma que cada tag <li> também está separada por um [ENTER]. Depois de fazer a alteração na index.html, atualize o navegador e você terá esse resultado:
No nosso código, quando damos um [ENTER] para separar as palavras dentro do <h1>, essa quebra de linha não acontece no navegador pois ele troca o [ENTER] que está no código por um [SPACE]. Lembra que cada <li> ganhou o comportamento de uma palavra após colocarmos o display: inline para eles? Sacou? O espaço entre as tags <li> existe pelo mesmo motivo que temos os espaços entre as palavras que o <h1> contém.
Você deve estar se perguntando como faz para tirar os espaços entre as tags <li>. Agora que entendemos o comportamento é muito simples, é só tirar o [ENTER] que está separando os elementos. Desta forma, nós transformaremos as três tags em uma palavra. Nosso código ficará assim:
<!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> <h1 class="title">
Primeiro
Segundo
Terceiro
</h1>
</body>
</html>
Quando você atualizar o navegador o layout deve ficar assim:
Agora estamos sem os espaços entre os elementos, mas infelizmente, o nosso código não ficou nada elegante, e quanto mais tags <li> tivermos mais difícil ficará a leitura do código. Uma outra maneira que a galera utiliza para remover os espaços tentando deixar o código um pouco mais elegante e mais fácil de ler, é utilizando comentários em vez de deixar as tags na mesma linha. Veja como o código deve ficar com os comentários:
<!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> <h1 class="title">
Primeiro
Segundo
Terceiro
</h1>
</body>
</html>
O resultado desse código no navegador vai ser o mesmo de quando deixamos as tags <li> na mesma linha. Essas são duas formas de tirar o espaçamento entre as tags.
Por nossas tags <li> estarem funcionando como palavras, nós conseguimos mexer com o posicionamento delas com a propriedade text-align. Ela tem que ser usada no pai das tags <li>, por exemplo se nós quisermos que elas fiquem centralizadas, basta colocarmos na <ul> a propriedade text-align: center. Vamos implementar o text-align: center para a <ul> no nosso CSS (displayInlineBlock.css):
.example {
color: #FFF;
text-align: center; /* Só adicionamos essa linha */
} .example-item {
width: 33.333%;
height: 150px;
display: inline;
}
.example-item_first {
background-color: #FAA116;
}
.example-item_second {
background-color: #57C7C3;
}
.example-item_third {
background-color: #3B97D3;
}
Vá até o navegador e atualize a página, você terá esse resultado:
Também podemos deixar nossas tags <li> posicionadas no lado direito. Para fazer isso é só mudar o text-align para right.
Agora você não precisa mais chutar quando for usar o valor inline da propriedade display. Lembre-se de tirar o width e height do CSS já que essas propriedades não funcionam com display: inline. Nossos códigos finais tem que ficar assim:
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> <h1 class="title">
Primeiro
Segundo
Terceiro
</h1>
</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;
text-align: center;
} .example-item {
display: inline;
}
.example-item_first {
background-color: #FAA116;
}
.example-item_second {
background-color: #57C7C3;
}
.example-item_third {
background-color: #3B97D3;
}
Esse código também está disponível no GitHub e CodePen.
Infelizmente não temos uma forma decente de implementar o layout do nosso desafio usando o display: inline. Nos próximos posts explicarei como funciona o diplay: block e display: inline-block. Até lá.
