Marco Bruno
Sep 19, 2016 · 8 min read
Se você prefere assistir um vídeo em vez de ler é só dar play aí :-)

Esse é o terceiro post de uma série que estou fazendo sobre como posicionar as coisas com CSS. Se quiser ver todos os posts que já escrevi e os que vou escrever dessa série, entre no primeiro post: Pare de chutar e aprenda as propriedades CSS de posicionamento.

Neste post nós vamos entender como funciona o display: block. Para facilitar a explicação, vamos utilizar o código final do post sobre display: inline como base. Se você quiser ir fazendo o código junto com o post, 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;
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;
}

Abrindo no navegador o HTML que acabamos de fazer, ele vai ter o seguinte layout:

Layout inicial do nosso código

Na tentativa de deixar o post um pouco mais dinâmico, vou colocar um desafio para implementarmos utilizando a propriedade display com o valor block.
Vamos tentar chegar no seguinte layout até o final do post:

Vamos implementar esse layout, utilizando a propriedade display: block

A primeira coisa que faremos é definir a largura (width) e altura (height) para todas as tags <li>. Vamos abrir o nosso CSS (displayInlineBlock.css) e definir a largura (width) com 33.333% e a altura (height) de 150px:

.example {
color: #FFF;
text-align: center;
}
.example-item {
display: inline;
width: 33.333%; // Adicionamos essa linha
height: 150px; // E essa aqui, também adicionamos
}
.example-item_first {
background-color: #FAA116;
}
.example-item_second {
background-color: #57C7C3;
}
.example-item_third {
background-color: #3B97D3;
}

Salve seu CSS, em seguida atualize seu navegador, o resultado vai ser:

Ficou igual ao layout inicial

Estranho, não mudou nada, parece que nem a largura (width) nem a altura (height) funcionaram. Por que isso aconteceu? Se sua resposta é não sei ou o CSS não funciona direito, vale a pena você dar uma olhada no post anterior a esse. Nele aprendemos como funciona o display: inline. Lá vimos que todo elemento HTML com display: inline, não aceita as propriedades width e height.

Para que o elemento HTML aceite as propriedades width e height, precisamos definir o valor do display como block. Vamos ver se isso que acabei de falar é verdade. Por favor, abra o nosso CSS (displayInlineBlock.css) e altere para block a propriedade display que está no seletor .example-item:

.example {
color: #FFF;
text-align: center;
}
.example-item {
display: block; // Trocamos inline por block
width: 33.333%;
height: 150px;
}
.example-item_first {
background-color: #FAA116;
}
.example-item_second {
background-color: #57C7C3;
}
.example-item_third {
background-color: #3B97D3;
}

Vai lá no seu navegador e atualize a página, você verá que eu não estou mentindo para você. Espero que você esteja com o resultado igual a imagem que está logo abaixo, isso não acontece, no problem, me manda uma mensagem que eu te ajudo.

Aí sim, nós conseguimos definir o width e height

Boa. Agora conseguimos definir a largura (width) e altura (height) para os nossos elementos. Ou seja, todos os elementos definidos com display: block, aceitam as propriedades width e height.

Lembra que definimos uma largura de 33.333% para as três <li>?
Teoricamente as <li> deveriam ficar uma do lado da outra. Isso não acontece porque todo elemento definido como block ocupa a linha inteira, ou seja, não deixa outro elemento ocupar a mesma linha que ele. Por esse motivo os elementos HTML (<li>) ficaram um abaixo do outro.

Falta pouco para implementarmos o código do nosso desafio. Agora só precisamos mover a nossa segunda <li> para direita e centralizar a terceira <li>. A forma mais simples de implementar isso é utilizando a propriedade margin (respiro externo) do CSS.

Só para começarmos a aprender como funciona a margin, vamos colocar 40px de margem do lado esquerdo da nossa segunda <li>. Para fazer isso precisamos adicionar a propriedade margin-left: 40px, no seletor .example-item_second que está no arquivo CSS (displayInlineBlock.css).

.example {
color: #FFF;
text-align: center;
}
.example-item {
display: block;
width: 33.333%;
height: 150px;
}
.example-item_first {
background-color: #FAA116;
}
.example-item_second {
background-color: #57C7C3;
margin-left: 40px; // Adicionamos 40px do lado esquerdo
}
.example-item_third {
background-color: #3B97D3;
}

Atualizando a nossa página no browser o resultado vai ficar assim:

Conseguimos mover um pouco o segundo elemento :-)

Estamos caminhando para deixar o segundo elemento deslocado para o lado direito da página, conforme foi proposto no nosso desafio. Para conseguirmos implementar essa parte do desafio, qual é o valor que devemos colocar na propriedade margin-left? Dica: lembre-se que a <li> tem 33.333% de largura.

É isso. Só fazermos a conta, 100% - 33.333%, teremos como resultado 66.667%. Para deixarmos o layout mais próximo do desafio, basta que a segunda <li> tenha no margin-left o valor de 66.667%. Bora fazer isso no nosso CSS (displayInlineBlock.css).

.example {
color: #FFF;
text-align: center;
}
.example-item {
display: block;
width: 33.333%;
height: 150px;
}
.example-item_first {
background-color: #FAA116;
}
.example-item_second {
background-color: #57C7C3;
margin-left: 66.667%; // Alteramos o 40px para 66.667%
}
.example-item_third {
background-color: #3B97D3;
}

Agora só dar uma atualizada no seu navegador:

Tá lá. A segunda li está no lado direito

Se precisarmos mudar a largura (width) de todas as <li> para 20%, o que vai acontecer com o nosso layout? O segundo elemento vai ficar no lado direito, bem encostadinho?

Infelizmente toda vez que mudarmos a largura (width) da <li> vamos ter que refazer a conta e mudarmos o valor da propriedade margin-left. Esta forma que acabamos de implementar funciona mas a manutenção não é muito feliz.

Felizmente temos um valor da propriedade margin-left que faz o cálculo para gente de forma automática, é só definirmos o margin-left como auto. Vai lá abra seu CSS (displayInlineBlock.css) e troque o 66.667% por auto:

.example {
color: #FFF;
text-align: center;
}
.example-item {
display: block;
width: 33.333%;
height: 150px;
}
.example-item_first {
background-color: #FAA116;
}
.example-item_second {
background-color: #57C7C3;
margin-left: auto; // Só trocamos 66.667% por auto
}
.example-item_third {
background-color: #3B97D3;
}

Assim que você atualizar o navegador vai ver que o layout não mudou nada do código anterior:

O resultado visual é o mesmo com porcentagem, mas com auto a manutenção é mais feliz

Mas, volte no seu código (displayInlineBlock.css) e altere a largura (width) dos seu <li> para 20%.

.example {
color: #FFF;
text-align: center;
}
.example-item {
display: block;
width: 20%; // Mudamos 33.333% para 20%
height: 150px;
}
.example-item_first {
background-color: #FAA116;
}
.example-item_second {
background-color: #57C7C3;
margin-left: auto;
}
.example-item_third {
background-color: #3B97D3;
}

Se você ir até o navegador e atualizar a página vai ver o seguinte resultado:

Mesmo mudando a largura das li temos o mesmo comportamento de posicionamento

Bacana né. Utilizando o margin-left: auto; não precisamos mais ficar fazendo a conta para definir o valor de margin-left. Desta forma a manutenção do código fica muito mais feliz.

Para finalizar o nosso desafio, só está faltando centralizar a terceira <li>. Agora nossas <li> estão com 20% de largura (width). Ou seja, quanto nós precisamos definir de margem à esquerda e à direita para ela ficar centralizada?

Basta colocar 40% de margem à esquerda e à direita. Mas, se a largura das <li>s forem alteradas novamente? Vamos ter que ficar mudando a propriedade margin-left e margin-right. Triste! Novamente temos o problema para mantermos o nosso código.

Ainda bem que temos uma solução para esse problema. :-)
Da mesma forma que nós definimos margin-left: auto; para deixar que o navegador calculasse a quantidade de margem necessária para colocar no lado esquerdo do segundo elemento, com o objetivo de deixar ele posicionado no lado direito, podemos pedir para o navegador calcular de forma automática a quantidade de margem do lado esquerdo e direito para que a terceira <li> fique centralizada.

Precisamos portanto adicionar o margin-left: auto; e margin-right: auto; no seletor da terceira <li> (.example-item_third). Abra o nosso CSS (displayInlineBlock.css) e implemente o margin-left e margin-right. Ah! Vamos aproveitar e voltar a largura de 33.333% nas <li> para o layout ficar igual ao do nosso desafio.

.example {
color: #FFF;
text-align: center;
}
.example-item {
display: block;
width: 33.333%; // Voltamos o valor de 33.333%
height: 150px;
}
.example-item_first {
background-color: #FAA116;
}
.example-item_second {
background-color: #57C7C3;
margin-left: auto;
}
.example-item_third {
background-color: #3B97D3;
margin-right: auto; // Adicionamos essa linha
margin-left: auto; // Adicionamos essa linha também
}

Beleza. Agora vai até o navegador e atualize a sua página:

Está aí. Implementamos o layout do nosso desafio com um código simples ;-)

Espero que você tenha gostado do post. É dessa forma que explico nas turmas de FrontEnd da Caelum. Se ficou qualquer dúvida, não concorda com alguma coisa, tem alguma dica para melhorar os próximos posts. Por favor, fale! Eu realmente ouço e sempre estou tentando melhorar. Até o próximo post que vai ser sobre, display: inline-block!!!

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