Elementos de Bloco vs. Inline

Parte da seção Estilização com CSS do Journey de HTML da Coddy. Lição 54 de 76.

Em HTML, os elementos são categorizados como elementos de nível de bloco ou inline, com base em como são exibidos na página. Entender a diferença entre esses dois tipos de elementos é fundamental para criar layouts bem estruturados e visualmente atraentes. Vamos explorar as características e os 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.

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>