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.

Hoja de referencia

Los elementos HTML se categorizan como elementos de nivel de bloque o en línea según su comportamiento de visualización.

Elementos de nivel de bloque

Los elementos de nivel de bloque comienzan en una nueva línea y ocupan todo el ancho disponible, estirándose hacia la izquierda y hacia la derecha tanto como sea posible.

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

Elementos en línea

Los elementos en línea no comienzan en una nueva línea y solo ocupan el ancho necesario para ajustarse a su contenido. Fluyen dentro de una línea de texto o dentro de elementos de nivel de bloque.

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

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>