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