Outra propriedade CSS que confunde muito a cabeça de quem está começando, inclusive a minha durante muito tempo, é a propriedade display.

Mas o que é o display?

O display, basicamente, é a forma como cada elemento é exibido dentro da página HTML. A maioria dos elementos HTML possuem o seu proprio display por padrão.

Podemos usar a propriedade display com os seguintes valores.

display: block;
display: inline;
display: inline-block;
display: none;

Nós também podemos usar a propriedade display com o valor flex, mas isso fica pra outro post. Vamos focar nos valores acima.

Por Exemplo,

   <section></section>
    <div></div>
    <p></p>
    <h1></h1>...<h6></h6>
    <form></form>
    <footer></footer>

Essas tags são todas exemplos de tags com valor de display block como default(padrão).

Outras tags como: 

    <img/>
    <span></span>
    <a></a>

já possuem como padrão o valor inline.


QUAL A DIFERENÇA DE UMA TAG COM O VALOR BLOCK E OUTRA COM O VALOR INLINE?

Uma tag com o valor block significa que ela ocupará todo espaço disponibilizado pra ela dentro do corpo da página(body), ou dentro de um container predefinido.

Vamos imaginar que criamos uma div vazia, adicionamos apenas uma cor a ela e um padding para que ela possa aparecer na página. Essa div ocupa todo o espaço da tela pois a mesma por default, possui a propriedade display com o valor block;

Estrutura CSS3

body{
    background-color: #1e1e1e;
}

h1{
    color: #fff;
    margin-bottom: 50px;
}

.divBlock{
    background-color: #fff;
    padding: 20px;
    margin-bottom: 10px;
}

Estrutura HTML5:

    <h1>Elementos de bloco</h1>

    <div class="divBlock">Div é um elemento de bloco</div>

Resultado:

Esse mesmo comportamento vai acontecer com todas as tags que possuirem o valor block por padrão.

<h1>Elementos de bloco</h1>

    <div class="divBlock">Div é um elemento de bloco</div>
    <section class="divBlock">Section é um elemento de bloco</section>
    <form class="divBlock">Form é um elemento de bloco</form>
    <footer class="divBlock">Footer é um elemento de bloco</footer>

Resultado:


Dependendo do layout você ainda pode atribuir valores diferentes de tamanho para cada uma delas. Vamos criar uma classe pra cada elemento para visualizarmos melhor

Estrutura CSS3

.divBlock{
    background-color: #fff;
    padding: 20px;
    margin-bottom: 10px;
    width: 500px;
}

.sectionBlock{
    background-color: #fff;
    padding: 20px;
    margin-bottom: 10px;
    width: 400px;
}

.formBlock{
    background-color: #fff;
    padding: 20px;
    margin-bottom: 10px;
    width: 300px;
}

.footerBlock{
    background-color: #fff;
    padding: 20px;
    margin-bottom: 10px;
    width: 200px;
}

Estrutura HTML5

    <h1>Elementos de bloco</h1>

    <div class="divBlock">Div é um elemento de bloco</div>
    <section class="sectionBlock">Section é um elemento de bloco</section>
    <form class="formBlock">Form é um elemento de bloco</form>
    <footer class="footerBlock">Footer é um elemento de bloco</footer>

Resultado:


Obs: Repare que mesmo o elemento footer sendo o menor na tela, ele ainda não será colocado ao lado da div acima dele. Por menores que os elementos de bloco(block) sejam, eles sempre ficarão um abaixo do outro.

Agora, quando uma tag possui um valor inline, a ideia é que qualquer outro elemento inline que venha depois no html, fique lado a lado com ela. Imagine que precisamos colocar uma imagem e um texto dentro de um span.

Estrutura CSS3

body{
    background-color: #1e1e1e;
}

h1{
    color: #fff;
    margin-bottom: 50px;
}

span{
    background-color: #fff;
    padding: 10px;
    font-size: 18px;
}

Estrutura HTML5

    <h1>Elementos inline</h1>

    <img src="./img/exemplo.png" alt="">
    <span>Esse span, e a imagem são elementos inline</span>

Resultado:

Todos esses elementos serão exibidos na tela lado a lado, pois todos eles possuem por default a propriedade display com o valor inline,e esse mesmo comportamento acontecerá com todas a tags html que possuem por padrão o valor inline.


ALTERANDO O VALOR DEFAULT DOS ELEMENTOS.

Para podermos utilizar com maior flexibilidade esses elementos, nós podemos alterar seus valores default do display.

Imagine a seguinte situação:

Você precisa de três containers lado a lado cada um com um conteúdo diferente, para mostrar aos usuários três opções de compra de um determinado produto, por exemplo. A primeira coisa a se fazer como uma boa prática, é criar um container que conterá essas três divs. Como esse container será o pai das três divs, manteremos ele com seu valor padrão de display, em outras palavras, não precisamos inserir nenhum valor a ele manualmente. Blz! Mas se você criar três divs dentro desse container, todas elas ficarão uma embaixo da outra pois seus valores por default, é block. 

Obs: Nesse post, não vamos nos preocupar com a distribuição ou alinhamento das divs dentro do container. Nossa missão aqui é colocá-las uma do lado da outra em uma mesma linha.

Estrutura HTML5

<body>
    <div class="container-pai">
        <div class="conteudo1">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Quo reiciendis nam, non porro facilis suscipit? Unde quod enim aspernatur
        vero perferendis beatae ipsam tempora deserunt impedit optio fuga, molestias
        distinctio!</p>
        </div>
       
        <div class="conteudo2">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Quo reiciendis nam, non porro facilis suscipit? Unde quod enim
                aspernatur vero perferendis beatae ipsam tempora deserunt impedit
                optio fuga, molestias distinctio!</p>
        </div>
       
        <div class="conteudo3">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Quo reiciendis nam, non porro facilis suscipit? Unde quod enim
                aspernatur vero perferendis beatae ipsam tempora deserunt impedit
                optio fuga, molestias distinctio!</p>
        </div>
    </div>
</body>

Estrutura CSS3

body{
    background-color: #1e1e1e;
}

.container-pai{
    border: solid 1px #fff;
    padding: 20px;
}

.conteudo1{
    background-color: #fff;
    padding: 10px;
    margin-bottom: 10px;
}

.conteudo2{
    background-color: #fff;
    padding: 10px;
    margin-bottom: 10px;
}

.conteudo3{
    background-color: #fff;
    padding: 10px;
    margin-bottom: 10px;
}

Resultado:

Nesse caso podemos simplesmente alterar o display dessas divs para inline. 

body{
    background-color: #1e1e1e;
}

.container-pai{
    border: solid 1px #fff;
    padding: 20px;
}

.conteudo1{
    background-color: #fff;
    padding: 10px;
    margin-bottom: 10px;
    display: inline;
}

.conteudo2{
    background-color: #fff;
    padding: 10px;
    margin-bottom: 10px;
    display: inline;
}

.conteudo3{
    background-color: #fff;
    padding: 10px;
    margin-bottom: 10px;
    display: inline;
}

E então você notará que sua div ficou completamente desconfigurada.


Isso por que nossas divs agora possuem valor inline, porém, os parágrafos dentro dela ainda são blocks. Mas, ao invés de definirmos nosso parágrafo como inline, o que vai gerar outro problema, vamos remover o valor da propriedade display da div que está como inline e substituí-lo pelo valor inline-block. 

Veja o resultado.


Pois é, voltamos a estaca zero. Porém, adicionando tamanho as divs, você verá que graças ao valor inline-block, elas ficarão lado a lado.

body{
    background-color: #1e1e1e;
}

.container-pai{
    border: solid 1px #fff;
    padding: 20px;
}

.conteudo1{
    background-color: #fff;
    padding: 10px;
    margin-bottom: 10px;
    display: inline-block;
    width: 200px;
}

.conteudo2{
    background-color: #fff;
    padding: 10px;
    margin-bottom: 10px;
    display: inline-block;
    width: 200px;
}

.conteudo3{
    background-color: #fff;
    padding: 10px;
    margin-bottom: 10px;
    display: inline-block;
    width: 200px;
}

Viu! Agora você consegue mantê-las lado a lado e ainda definir valores de tamanho para elas conforme sua necessidade. Inclusive cada uma delas pode ter valores diferentes.


Da mesma forma, você também pode alterar o valor padrão do display de uma tag com display inline para block, caso vc precise que ela ocupe todo o espaço de um determinado container.


Por último, vamos apresentar o display com o valor none.

Esse é comumente utilizado junto com o javaScript. Você altera o valor do display via código JS alterando o valor da propriedade css, ou simplesmente criando uma classe no css que contenha essa configuração e apenas adiciona e remove a classe conforme o usuário clica.

Vamos criar uma div com um um botão e mais uma div abaixo com um texto, quando o usuário clicar no botão ele muda a mensagem no botão, e faz o texto desaparecer, quando clicar novamente, ele altera a mensagem novamente e faz o texto aparecer. Simples assim! 

Extrutura HTML5

<div class="demonstrandoDisplayNone">
            <button>Display Block</button>

            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Ex aperiam minus deserunt vero dignissimos mollitia quidem
                    consectetur? Doloremque non, tempore fugiat facere incidunt
                    ab officia cupiditate consequuntur, neque maiores facilis?
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Ex aperiam minus deserunt vero dignissimos mollitia quidem
                    consectetur? Doloremque non, tempore fugiat facere incidunt
                    ab officia cupiditate consequuntur, neque maiores facilis?</p>
            </div>            
        </div>

Extrutura CSS3

.demonstrandoDisplayNone{
    background-color: #fff;
    padding: 10px;
    margin-bottom: 10px;
   
}

.content{
    display: block;
   
}

.displayNone{
    display: none;
}

button{
    background: #fff;
    color: #4d4d4d;
    border-radius: 5px;
    border: none;
    padding: 10px 20px;
cursor: pointer;
    transition: .5s
}
   
button:hover{
    background: #4d4d4d;
    color: #fff;
   
}

Um pequeno código JavaScript foi adicionado para aplicar a classe a div content, e alterar a mensagem no botão.

<script>
        const bt = document.querySelector('button')
        const demonstrandoDisplayNone = document.querySelector('.content')

        bt.addEventListener('click', () => {
            var txt = bt.innerText
            demonstrandoDisplayNone.classList.toggle('displayNone')

            if(bt.innerText === 'Display Block'){
                bt.innerText = 'Display None'

                return
            }         

            bt.innerText = 'Display Block'   
        })      
 </script>

Obs: Aqui, a intenção é que você entenda bem como a propriedade display e seus valores afetam o posicionamento dos elementos em tela. Se você não conhece JavaScript, não se preocupe. O código está ai apenas para fazer o botão funcionar.

Clique no botão abaixo e veja um exemplo:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex aperiam minus deserunt vero dignissimos mollitia quidem consectetur? Doloremque non, tempore fugiat facere incidunt ab officia cupiditate consequuntur, neque maiores facilis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex aperiam minus deserunt vero dignissimos mollitia quidem consectetur? Doloremque non, tempore fugiat facere incidunt ab officia cupiditate consequuntur, neque maiores facilis?


Esse post foi util pra você? Deixe um comentário!!