Elementos in-line e elementos block-level

Entenda a diferênça e como são renderizados os elementos HTML do tipo inline e block level.

Figura ilustrando elementos htmtl do tipo inline e block level

O objetivo da matéria é entender as diferênças entre os dois tipos essenciais de tags: in-line e de block-level.

A diferênça básica é que o browser acomoda os elementos de bloco um abaixo do outro e os inline à esquerda um ao lado do outro.

Figura ilustrando elementos htmtl do tipo inline e block level

Abaixo vemos um HTML com alguns elementos (tags) tanto inline como block level.

Clique na aba result para ver como eles são renderizados.

See the Pen Elementos in-line e elementos block-level by Flávio Micheletti (@flaviomicheletti) on CodePen.

Abaixo vemos alguns elementos básicos do tipo block-level:

... e alguns elementos in-line:

Há ainda um terceiro tipo de elemento: o inline-block que nada mais é do que um elemento de bloco acomodado como um elemento inline.

A CSS pode alterar o tipo do elemento. Com a propriedade display é possível utilizar os três valores:

  1. lock
  2. inline
  3. inline-block

A tag div é block-level, mas se aplicarmos o valor inline a propriedade display ela começará a se comportar como uma tag inline. Exemplo:

div {
    display: inline;
}

O inverso também é verdadeiro.

A tag span é inline, mas se aplicarmos o valor block a propriedade display ela se comportará como uma tag block-level. Exemplo:

span {
    display: block;
}

Comentários

comments powered by Disqus