Tudo que você precisa saber sobre elementos block e inline

Este é um assunto que vai ajudar você na hora de construir o seu site. Dessa forma, você deve ter em mente como funcionam os elementos block e inline. Por que você precisa prestar atenção aos elementos block e inline? Porque eles podem modificar o espaço que ocupam na página.

Em outras palavras, ao organizar os elementos em um documento HTML, é importante entender como esses elementos ocupam espaço em uma página da web. No entanto, certos elementos podem ocupar muito mais espaço na página do que o conteúdo que eles contêm.

Dessa maneira, compreender o comportamento de diferentes tipos de elementos ajudará você a antecipar como eles afetam a posição de outros elementos na página.

Portanto, você deve ter em mente que todo elemento HTML possui um método padrão de exibição na página. Essa exibição, por sua vez, é um padrão que determina se os elementos são considerados block level ou inline.

Elementos block level

Os elementos de nível de bloco ocupam o máximo de espaço possível por padrão, por isso, cada elemento de nível de bloco iniciará uma nova linha na página, empilhando-a. Além de empilhar verticalmente, os elementos de nível de bloco também ocuparão o máximo de espaço horizontal possível.

Por exemplo, o elemento “p” é um bom exemplo de um elemento de nível de bloco. Dessa forma, cada nova tag de parágrafo aparecerá em sua própria linha verticalmente, então parágrafos com conteúdo mais longo se estenderão até a borda da página.

Tipos de elementos block level

• <address></address> — Define as informações de contato do autor/proprietário de um documento ou artigo;
• <article></article> — Específico conteúdo independente e autocontido, como artigos, blog, notícias;
• <aside></aside> — Define algum conteúdo além do conteúdo existente;
• <blockquote></blockquote> — Especifica uma seção citada de outra fonte;
• <canvas></canvas> — É desenhos de gráficos, em tempo real, via script (geralmente JavaScript):
• <dd></dd> — Descreve um termo/nome em uma lista de descrição;
• <div></div> — Define uma divisão ou uma seção em um documento HTML;
• <dl></dl> — Define uma lista de descrição;
• <dt></dt> — Define um termo/nome em uma lista de descrição;
• <fieldset></fieldset> — Agrupa elementos relacionados em um formulário;
• <figcaption></figcaption> — Define uma legenda para um elemento;
• <figure></figure> — Específico conteúdo independente, como ilustrações, diagramas, fotos, listagens de códigos, etc.;
• <footer></footer> — Define um rodapé para um documento ou seção;
• <form></form> — Cria um formulário HTML para entrada do usuário;
• <h1></h1> a <h6></h6> — Defini cabeçalhos HTML;
• <header></header> — Representa um contêiner para conteúdo introdutório ou um conjunto de links de navegação;
• <hr> — Define uma quebra temática em uma página HTML (por exemplo, uma mudança de tópico). Representada com uma linha horizontal;
• <li></li> — Define um item de lista;
• <main></<main> — Especifica o conteúdo principal de um documento;
• <nav></nav> — Define um conjunto de links de navegação;
• <noscript></noscript> — Define um conteúdo alternativo para usuários que desabilitaram scripts em seus navegadores ou têm um navegador que não suporta script;
• <ol></ol> — Definir uma lista ordenada;
• <p></p> — Definir um parágrafo;
• <pre></pre> — Define o texto pré-formatado;
• <section></section> — Define uma seção em um documento;
• <table></table> — Define uma tabela HTML;
• <tfoot></tfoot> — Agrupa o conteúdo do rodapé em uma tabela HTML;
• <ul><<ul> — Define uma lista não ordenada;
• <video></video> — Incorpora conteúdo de vídeo em um documento, como um clipe de filme ou outros fluxos de vídeo.

Veja também:

Introdução Rápida Sobre CSS
Introdução rápida sobre Python
Introdução rápida sobre JavaScript

Elementos inline

Os elementos inline (embutidos) usam linhas para aparecerem. Eles não forçam o texto depois deles para uma nova linha. Uma âncora (ou link) é um exemplo de um elemento embutido. Então você pode colocar vários links na mesmo linha e não ocorrerá quebra de linha.

Tipos de elementos inline

<a></a> — Determina um hiperlink que vincula uma página a outra;
<abbr></abbr> — Define uma abreviação ou um acrônimo, como “HTML”, “CSS”, “Mr.”, “Dr.”, “ASAP”, “ATM”;
<b></b> — Específico texto em negrito sem nenhuma importância extra;
<bdo></bdo> — Substitui a direção do texto atual;
<br> — Insere uma única quebra de linha;
<button> — Determina um botão clicável;
<cite></cite> — Define o título de um trabalho criativo;
<code></code> — Determina um pedaço de código de computador;
<dfn></dfn> — Representa o “elemento de definição” e especifica um termo que será definido no conteúdo;
<em></em> — Define o texto enfatizado. O conteúdo interno geralmente é em itálico;
<i></i> — Define uma parte do texto em uma voz ou humor alternativo. O conteúdo interno geralmente é exibido em itálico;
<img> — É usada para incorporar uma imagem em uma página HTML;
<input> — Especifica um campo de entrada onde o usuário pode inserir dados;
<kbd></kbd> — É usada para definir a entrada do teclado;
<label> — Define um rótulo para vários elementos;
<map></map> — É usada para definir um mapa de imagem;
<object></object> — Define um contêiner para um recurso externo;
<output></output> — É usada para representar o resultado de um cálculo;
<q></q> — Define uma cotação curta;
<samp></samp> — Define a saída de amostra de um programa de computador;
<script></script> — Incorpora um script do lado do cliente;
<select></select> — Cria uma lista suspensa;
<small></small> — Define um texto menor (como direitos autorais e outros comentários secundários);
<span></span> — É um contêiner embutido usado para marcar uma parte de um texto ou uma parte de um documento;
<strong></strong> — Usa-se para definir texto com forte importância. O conteúdo interno geralmente é exibido em negrito;
 — Define o texto subscrito;
 — Determina o texto sobrescrito;
<textarea></textarea> — Define um controle de entrada de texto de várias linhas;
<time></time> — Define um horário específico (ou datetime);
<var></var> — É usada para definir uma variável na programação ou em uma expressão matemática.

Transformar elemento block level em inline e vice-versa

Você pode manipular como um elemento se comporta na página modificando sua propriedade “display” em CSS.

Assim, você pode definir um elemento “block level” para ser exibido como um elemento “inline”, configurando a propriedade “display” com o valor “inline”.

p {
  display: inline;
}

Da mesma forma, você também pode fazer com que os elementos inline se comportem como elementos em bloco usando a propriedade display.

i {
  display: block;
}

Certamente, esses não são os únicos valores que a propriedade “display” tem. Por exemplo, posso citar o valor “inline-block”. Embora seja uma combinação estranha das duas citadas acima, tem algumas funções diferentes.

• Elementos aceitam width e height propriedades;
• Os elementos podem ter preenchimento vertical e horizontal em todos os lados;
• Elementos não comece em uma nova linha;
• Muitas vezes haverá uma pequena lacuna entre inline-block elementos.

Veja o primeiro artigo do Tutorial: Estrutura Básica Do HTML

Mapa mental

Um mapa dos elementos block leve e inline para você estudar e memorize.

Mapa dos elementos inline

Mapa dos elementos block level

Conclusão

Agora você já sabe quais elementos ficam na mesma linha e quais quebram linha. Então, vamos avançar ainda mais no conteúdo. Portanto, selecione o próximo artigo da série e vamos aprender cada vez mais.

Perguntas frequentes: