Block e inline: el flujo por defecto

Antes de aprender Flexbox o Grid, necesitás entender cómo el navegador dispone los elementos por defecto: el flujo normal. En el flujo normal hay dos tipos de caja: block e inline.

Elementos block

Un elemento block ocupa todo el ancho disponible de su contenedor y genera un salto de línea antes y después. Dos elementos block no pueden estar lado a lado: siempre se apilan.

<p>Café del día: Espresso</p>
<p>Precio: $4,50</p>
<!-- Aunque haya espacio al costado, los dos párrafos se apilan -->

Las características clave de un elemento block:

Ancho: por defecto 100% del padre (no de la pantalla — del contenedor donde vive).
Alto: lo determina el contenido (salvo que declares height).
width y height funcionan: podés controlarlos con CSS.
margin-top y margin-bottom funcionan: crean espacio vertical real.

Elementos inline

Un elemento inline no genera saltos de línea: fluye dentro de la línea de texto como las palabras de un párrafo. Si hay espacio, el siguiente inline se pone al costado.

<p>
  Probá nuestro
  <strong>Cold Brew</strong>
  o el <em>Flat White</em> — el mejor de la cuadra.
</p>
<!-- strong y em fluyen dentro del párrafo sin romper la línea -->

Las características clave de un elemento inline:

width y height se ignoran: el ancho y el alto los determina el contenido, no el CSS.
margin-top y margin-bottom no desplazan el flujo: los márgenes verticales se renderizan pero no mueven las líneas vecinas.
margin-left y margin-right sí funcionan.

Dato fino — <img> es la excepción: <img> es inline por defecto, pero acepta width y height porque es un replaced element (su contenido lo provee el navegador, no el HTML). No hace falta cambiarlo a inline-block para ponerle dimensiones.

Elementos block y inline comunes

Elementos block por defecto:

Elemento	Uso semántico
`<div>`	Contenedor genérico
`<p>`	Párrafo
`<h1>` a `<h6>`	Encabezados
`<section>`, `<article>`, `<header>`, `<footer>`, `<main>`, `<nav>`, `<aside>`	Secciones semánticas
`<ul>`, `<ol>`	Listas
`<li>`	Ítem de lista (display: list-item por defecto)
`<blockquote>`, `<pre>`, `<figure>`	Bloques de contenido especiales
`<form>`, `<table>`	Formularios y tablas

Elementos inline por defecto:

Elemento	Uso semántico
`<span>`	Contenedor genérico inline
`<a>`	Hipervínculo
`<strong>`, `<em>`	Énfasis semántico
`<small>`, `<mark>`, `<abbr>`, `<code>`, `<time>`	Texto con semántica específica
`<img>`	Imagen (inline replaced — acepta width/height)
`<input>`, `<button>`	Controles de formulario

Cambiar el display con CSS

Podés cambiar el tipo de caja de cualquier elemento con la propiedad display:

/* los li son list-item por defecto: se apilan */
/* para una barra de navegación en línea: */
li {
  display: inline;
}

<nav>
  <ul>
    <li>Inicio</li>
    <li>Menú</li>
    <li>Contacto</li>
  </ul>
</nav>
<!-- Ahora los tres li están en la misma línea -->

Importante: display cambia la representación visual de la caja, no lo que el elemento ES. Un <li> con display: inline sigue siendo un ítem de lista para lectores de pantalla y motores de búsqueda. La semántica la da el HTML, no el CSS.

Tu turno: en el sandbox, convertí los li y el p.desc en inline y verificá con “Comprobar”.

Nota sobre el motor: el UA default de <li> es list-item (no inline). Si no escribís nada, el primer check falla con actual: "list-item" — eso es exactamente lo que queremos que veas. La propiedad width en un elemento inline no es validable automáticamente: getComputedStyle devuelve el ancho real del contenido en px (impredicible), no el valor declarado. Por eso el bonus es solo para observar visualmente.