TheLazy.Dev
Portfolio GitHub

Blog

css |display |position |frontend

Pare de chutar e aprenda como funciona o display: inline

marcobrunodev

Marco Bruno 🤡

Posted on October 29, 2019

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>
Enter fullscreen mode Exit fullscreen mode

CSS (reset.css) 

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

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;
}
Enter fullscreen mode Exit fullscreen mode

O resultado desse código no navegador deve ficar parecido com:

Alt Text

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:

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

Após alterar o CSS, dê uma atualizada no seu navegador. Você verá que o resultado não foi muito feliz:

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode

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:

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode

Quando você atualizar o navegador o layout deve ficar assim:

Alt Text

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
    TerceiroVá até o navegador e atualize a página, você terá esse resultado:
  </h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Vá até o navegador e atualize a página, você terá esse resultado:

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode

CSS (reset.css) 

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

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;
}
Enter fullscreen mode Exit fullscreen mode

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

💖 💪 🙅 🚩
marcobrunodev
Marco Bruno 🤡

Posted on October 29, 2019

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

Sign up to receive the latest update from our blog.

Related

Pare de chutar e aprenda como funciona o display: inline
css Pare de chutar e aprenda como funciona o display: inline

October 29, 2019