Bloco HTML e Elementos Inline
Cada elemento HTML tem um valor de exibição padrão, dependendo do tipo de elemento.
Existem dois valores de exibição: block e inline.
Elementos em nível de bloco
Um elemento de nível de bloco sempre começa em uma nova linha.
Um elemento de nível de bloco sempre ocupa toda a largura disponível (se estende para a esquerda e para a direita o máximo possível).
Um elemento de nível de bloco tem uma margem superior e uma margem inferior, enquanto um elemento embutido não.
Exemplo
<div>Hello World</div>
Aqui estão os elementos de nível de bloco em HTML:
Elementos embutidos
Um elemento embutido não inicia em uma nova linha.
Um elemento embutido ocupa apenas a largura necessária.
Este é um elemento <span> dentro de um parágrafo.
Exemplo
<span>Hello World</span>
Aqui estão os elementos embutidos em HTML:
Nota: Um elemento embutido não pode conter um elemento de nível de bloco!
O elemento <div>
O <div>elemento é frequentemente usado como um contêiner para outros elementos HTML.
O <div>elemento não possui atributos obrigatórios, mas style, classe idsão comuns.
Quando usado junto com CSS, o <div>elemento pode ser usado para estilizar blocos de conteúdo:
Exemplo
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
O elemento <span>
O <span>elemento é um contêiner embutido usado para marcar uma parte de um texto ou uma parte de um documento.
O <span>elemento não possui atributos obrigatórios, mas style, classe idsão comuns.
Quando usado junto com CSS, o <span>elemento pode ser usado para estilizar partes do texto:
Exemplo
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes
and my father has <span style="color:darkolivegreen;font-weight:bold">dark
green</span> eyes.</p>
Resumo do capítulo
- Existem dois valores de exibição: block e inline
- Um elemento de nível de bloco sempre começa em uma nova linha e ocupa toda a largura disponível
- Um elemento embutido não inicia em uma nova linha e só ocupa a largura necessária
- O
<div>elemento é um nível de bloco e é frequentemente usado como um contêiner para outros elementos HTML - O
<span>elemento é um contêiner embutido usado para marcar uma parte de um texto ou uma parte de um documento
Tags HTML
| Tag | Description |
|---|---|
| <div> | Defines a section in a document (block-level) |
| <span> | Defines a section in a document (inline) |
Para obter uma lista completa de todas as tags HTML disponíveis, visite nossa Referência de tags HTML .