Elementos de bloque vs. en línea

Parte de la sección Styling with CSS del Journey de HTML de Coddy. Lección 54 de 76.

En HTML, los elementos se categorizan como elementos de nivel de bloque o en línea, según cómo se muestran en la página. Comprender la diferencia entre estos dos tipos de elementos es crucial para crear diseños bien estructurados y visualmente atractivos. Exploremos las características y comportamientos de los elementos de nivel de bloque y en línea.

Elementos de nivel de bloque

Un elemento de nivel de bloque siempre comienza en una nueva línea y ocupa todo el ancho disponible, extendiéndose hacia la izquierda y hacia la derecha tanto como puede. Crea un "bloque" de contenido.

Ejemplos de elementos de nivel de bloque incluyen:

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

Elementos en línea

Un elemento en línea no comienza en una nueva línea y solo ocupa el ancho necesario para ajustarse a su contenido. Permite que los elementos en línea fluyan dentro de una línea de texto o dentro de un elemento de nivel de bloque.

Ejemplos de elementos en línea incluyen:

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

Desafío

Fácil

Se te proporciona un documento HTML con varios elementos. Tu tarea es identificar qué elementos son de nivel de bloque y cuáles son en línea, y luego aplicar un poco de CSS básico para resaltar las diferencias. Sigue los pasos a continuación:

Escribe una regla CSS que se dirija a todos los elementos de nivel de bloque (div, p, h1). Establece su background-color a lightgray y añade un border de 1px solid blue.
Escribe una regla CSS que se dirija a todos los elementos en línea (span, a, img). Establece su background-color a lightyellow y añade un border de 1px solid red.

Observa cómo los elementos de nivel de bloque ocupan todo el ancho disponible y comienzan en líneas nuevas, mientras que los elementos en línea solo ocupan el espacio necesario y fluyen dentro de la línea.

Pruébalo tú mismo

<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>