Elementos Block vs Inline

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 54 de 76.

No HTML, os elementos são categorizados como elementos de nível de bloco (block-level) ou inline, com base em como são exibidos na página. Compreender a diferença entre esses dois tipos de elementos é crucial para criar layouts bem estruturados e visualmente atraentes. Vamos explorar as características e comportamentos dos elementos de nível de bloco e inline.

Elementos de nível de bloco

Um elemento de nível de bloco sempre começa em uma nova linha e ocupa toda a largura disponível, estendendo-se para a esquerda e para a direita o máximo que puder. Ele cria um "bloco" de conteúdo.

Exemplos de elementos de nível de bloco incluem:

<div>
<h1> - <h6>
<p>
<ul>, <ol>, <li>
<form>
<table>
<header>, <footer>, <section>, <article>, <nav>

Elementos Inline

Um elemento inline não começa em uma nova linha e ocupa apenas a largura necessária para acomodar seu conteúdo. Ele permite que elementos inline fluam dentro de uma linha de texto ou dentro de um elemento de nível de bloco.

Exemplos de elementos inline incluem:

<span>
<a>
<img>
<strong>, <em>
<input>, <button>, <label>
<textarea>

Desafio

Fácil

Você recebeu um documento HTML com vários elementos. Sua tarefa é identificar quais elementos são de nível de bloco e quais são inline, e então aplicar um CSS básico para destacar as diferenças. Siga os passos abaixo:

Escreva uma regra CSS que selecione todos os elementos de nível de bloco (div, p, h1). Defina o seu background-color como lightgray e adicione uma border de 1px solid blue.
Escreva uma regra CSS que selecione todos os elementos inline (span, a, img). Defina o seu background-color como lightyellow e adicione uma border de 1px solid red.

Observe como os elementos de nível de bloco ocupam toda a largura disponível e começam em novas linhas, enquanto os elementos inline ocupam apenas o espaço necessário e fluem dentro da linha.

Folha de consulta

Os elementos HTML são categorizados como elementos de nível de bloco ou em linha com base em seu comportamento de exibição.

Elementos de Nível de Bloco

Elementos de nível de bloco começam em uma nova linha e ocupam toda a largura disponível, estendendo-se para a esquerda e para a direita o máximo possível.

Exemplos: <div>, <h1>-<h6>, <p>, <ul>, <ol>, <li>, <form>, <table>, <header>, <footer>, <section>, <article>, <nav>

Elementos em Linha

Elementos em linha não começam em uma nova linha e ocupam apenas a largura necessária para acomodar seu conteúdo. Eles fluem dentro de uma linha de texto ou dentro de elementos de nível de bloco.

Exemplos: <span>, <a>, <img>, <strong>, <em>, <input>, <button>, <label>, <textarea>

Experimente você mesmo

<html>
<head>
    <title>Block vs Inline Elements</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>This is a div element.</div>
    <p>This is a paragraph with a <span>span element</span> inside.</p>
    <h1>This is a heading element.</h1>
    <a href="#">This is a link</a>
    <img src="https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-54865.jpg" alt="Image" width="100">
</body>
</html>