Posicionando elementos em HTML e CSS: o atributo display

Publicação: 01/03/2019
Área:Design Gráfico e Marketing Digital

Posicionando elementos em HTML e CSS: o atributo display

Como já vimos em um artigo anterior, Semântica no HTML e CSS, o HTML tem como função definir a semântica dos elementos de uma página web, ficando a cargo do CSS a definição da apresentação destes elementos.

Isso não significa que os elementos do HTML não tenham uma apresentação padrão. Por exemplo, não havendo nenhuma especificação em contrário em CSS, a tag <b> faz com que um elemento seja mostrado em negrito, a tag <p> vai colocar o elemento em uma nova linha, etc.

Porém, estas são apenas apresentações padrão, e todas as características de apresentação de qualquer elemento podem ser redefinidas no CSS. Em tese, você poderia definir em CSS para uma tag <p> ter uma apresentação como se fosse uma tag <b> e vice-versa, apenas é difícil imaginar uma situação em que isso fizesse sentido, a menos que você queira deixar mais confuso o código html de uma página.

Ao observarmos o comportamento padrão destas duas tags, observamos que elas tem um comportamento diferente em relação ao fluxo do texto, em que a tag <b> não interfere no fluxo do texto, enquanto a tag <p> interrompe este fluxo e inicia uma nova linha. Em CSS, estes dois comportamentos são definidos na propriedade display.



Display com valor inline

Um dos valores válidos do atributo display do html é o valor inline.

Todo elemento inline não afeta o fluxo do texto.

Por exemplo, quando queremos dar destaque a uma palavra ou frase em um texto, podemos querer que este elemento aparece em negrito ou itálico. Nestes casos, não queremos interromper o fluxo do texto, ou separar o elemento em uma nova linha, queremos que a exibição dele com atributos de negrito ou itálico não interfira no seu fluxo no texto.

Portanto, elementos cuja função é dar um destaque a uma parte de um texto, como as tags <b> e <i>, que, por padrão exibem textos respectivamente em negrito e itálico, possuem, tambem por padrão, o valor de inline para o atributo display.



Display com valor block

Quando queremos definir que um determinado conjunto de frases constitui um parágrafo, temos uma tag específica para isso, a tag <p>. Porém, por padrão, na definição de um elemento como parágrafo, queremos que ele efetivamente seja separado dos elementos que vem antes e depois dele, iniciando uma nova linha isolada das linhas acima e abaixo.

Elementos como o p tem, como padrão do atributo display o valor block.



Imagens e outros elementos podem ser alinhados utilizando inline e/ou block como display

Embora estejamos falando apenas de textos, para facilitar a compreensão, o posicionamento vale para qualquer elemento. Assim, pode-se, por exemplo, alinhar imagens lado a lado com display:inline, ou uma abaixo da outra, com display:block.

Porém, uma das situações mais comuns de alinhamento não é atendida por nenhuma das duas opções de display, que é quando queremos alinhar elementos um ao lado do outro, mas que se comportem como blocos isolados. Para este fim, temos uma terceira opção de valor, o inline-block.

Antes de explicarmos, o melhor é visualizarmos. Veja as estruturas abaixo, que utilizam inline, block e inline-block, e acompanhe a explicação sobre o inline-block.



DISPLAY:BLOCK

Este é um exemplo fácil de entender. Os três elementos estão com display block, logo cada um está isolado dos demais por uma quebra de linha.



DISPLAY:INLINE

Este é o exemplo do inline, mas talvez não seja o que se esperaria, já que mostra um layout confuso. Ocorre que dentro do elemento, nós temos quebras de linha, e como o elemento em si utiliza inline, ele segue o fluxo do texto anterior.

É visível que, na maioria dos casos, gostaríamos de um comportamento diferente, algo que misturasse os comportamentos do inline e do block.



DISPLAY:INLINE-BLOCK

O que temos aqui é algo que não é nem o block, já que cada elemento segue o fluxo do elemento anterior em vez de começar uma nova linha, mas também não é o inline, pois cada elemento é tratado como um bloco.

A opção inline-block justamente permite alinhar elementos lado a lado, com cada elemento sendo tratado no alinhamento como um bloco único.



Display com valor inline-block

Confira o vídeo a seguir, que mostra o exemplo acima sendo contruído, passo a passo, e pratique o uso de inline-block para organizar elementos em uma página, de forma a dominar este recurso do HTML.

Cursos de HTML Alfamídia

O domínio da linguagem HTML é apenas um dos conhecimentos necessários para quem trabalha com web design, mas um conhecimento aprofundado da linguagem garante que você consiga trabalhar todo tipo de layout em qualquer framework, como Bootstrap, e utilizando diferentes ferramentas como o Wordpress.

Confira o curso online completo de Web Design da Alfamídia, com dezenas de cursos e centenas de video-aulas como este acima, que pertence a um dos cursos introdutórios de HTML.

• Curso de Web Design Online