HTML & CSS - Div e Span

A tag div é um elemento do tipo container que acomoda outras tag's, é um divisor de espaços.

Um elemento que pode ajudar a adicionar estrutura a um documento é um elemento div. Muitas pessoas acreditam equivocadamente que um elemento div não tem nenhum significado semântico. Mas, na verdade, significa divisão e fornece uma maneira de dividir um documento em áreas sigficativas.

<div>

</div>

Embora divs posssam ser utilizados para agrupar elementos no nível de bloco, spans podem ser utilizados para agrupar ou identificar elementos inline.

Para entender melhor essa questão dos elementos de bloco ou inline leia a matéria Elementos in-line e elementos block-level.

A tag span acomoda pequenos trechos de texto.

<span>um pequeno texto</span>

Apesar de, aparentemente, não fazerem nada, ambas as tag's são muito utilizadas.

A utilização visa sofrer alguma estilização posterior, com ajuda do CSS.

Estilizando

As span são muito úteis para destacar textos, veja:

See the Pen Simple span by Flávio Micheletti (@flaviomicheletti) on CodePen.

Quando falamos de divs, a primeira coisa que nos vem a mente é o boxmodel. Se você ainda não o conhece, talvez a imagem abaixo possa esclarecer.

box model css

As divs representam papel importante na definição de layout CSS. Abaixo, vemos um exemplo de layout CSS.

layout CSS

Centralizar divs é sempre uma dúvida para quem está começando, uma forma de fazer isso é configurar as margens para tamanho automático margin: auto.

See the Pen Centralizando divs by Flávio Micheletti (@flaviomicheletti) on CodePen.

Comentários

comments powered by Disqus