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:

  • div
  • h1, h2, h3
  • p
  • ul, ol
  • table
  • form
  • fildset
  • hr

… e alguns elementos in-line:

  • span
  • a
  • img
  • td
  • label
  • input
  • select
  • textarea

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. block
  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;
}

Navegue nesta série!


Comentários

comments powered by Disqus