Summary  
This chapter explains CSS inline elements’ default display behavior and box model constraints, showing that their width and height can’t be explicitly set and only horizontal padding, margin, and border properties take effect.

General domain of usage  
Web page styling and layout.

**Los elementos en línea** permanecen en una sola línea y se ajustan a la siguiente línea cuando se acaba el espacio. Este comportamiento está controlado por la propiedad CSS `display: inline`.

Puntos clave sobre los elementos en línea:
- Por defecto tienen `display: inline`;
- Su ancho y alto están determinados por su contenido y no pueden establecerse explícitamente;
- Solo se pueden aplicar propiedades horizontales como `padding`, `margin` y `border`.

Analicemos un ejemplo donde algunos estilos afectan al elemento, mientras que otros no, dentro del archivo CSS:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxhIGhyZWY9Imh0dHBzOi8vd3d3Lmdvb2dsZS5jb20vIiB0YXJnZXQ9Il9ibGFuayI+R29vZ2xlPC9hPgogIDwvYm9keT4KPC9odG1sPg==

LyogVGhlc2UgcHJvcGVydGllcyB3b3JrICovCmEgewogIGJvcmRlci1sZWZ0OiAxcHggc29saWQgZmlyZWJyaWNrOwogIGJvcmRlci1yaWdodDogM3B4IGRhc2hlZCBzZWFncmVlbjsKICBwYWRkaW5nLWxlZnQ6IDEwcHg7CiAgcGFkZGluZy1yaWdodDogNXB4OwogIG1hcmdpbi1sZWZ0OiA1cHg7CiAgbWFyZ2luLXJpZ2h0OiAxNXB4Owp9CgovKiBUaGVzZSBwcm9wZXJ0aWVzIGRvbid0IHdvcmsgKi8KYSB7CiAgd2lkdGg6IDMwMHB4OwogIGhlaWdodDogNTAwcHg7CiAgbWFyZ2luLXRvcDogNTBweDsKICBtYXJnaW4tYm90dG9tOiAxMHB4Owp9

Por defecto, los elementos **en línea** presentan un espacio en el lado derecho; para los elementos `img`, este espacio se encuentra en la parte inferior. Este espacio no se debe al `padding` ni al `margin`. En su lugar, es un espacio en blanco inherente que los navegadores añaden para asegurar una separación entre cada elemento.

Estudiar más

PGh0bWwgbGFuZz0iZW4iPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHNwYW4+VGV4dC0xPC9zcGFuPgogICAgPHNwYW4+VGV4dC0yPC9zcGFuPgogICAgPHNwYW4+VGV4dC0zPC9zcGFuPgogIDwvYm9keT4KPC9odG1sPg==

Domina los conceptos esenciales de CSS (Cascading Style Sheets), el lenguaje de estilos que transforma la apariencia de las páginas web. Explora conceptos clave como estilos de texto, colores, espaciado, el modelo de caja, Flexbox y efectos decorativos. Desarrolla las habilidades necesarias para crear páginas web visualmente atractivas y bien estructuradas. Ideal para principiantes que buscan establecer una base sólida en CSS.

Aprenda qué es CSS, cómo conectarlo con HTML y cómo aplicar estilos a los elementos HTML utilizando selectores. Explore conceptos fundamentales como colores de texto, pseudo-clases de acción del usuario y variables en CSS.

Descubra cómo estilizar y formatear texto en sus páginas web. Aprenda a aplicar fuentes personalizadas y explore diversas propiedades de fuente para mejorar la apariencia del texto.

Aprenda los fundamentos del modelo de caja, que define la disposición y el espaciado de los elementos en una página web. Explore conceptos como el dimensionamiento de cajas, la adición de espacio a los elementos, el trabajo con elementos de bloque e inline, y el uso de pseudoclases estructurales y funcionales para estilos avanzados.

Descubra Flexbox, un potente método de diseño en CSS para organizar elementos en filas y columnas. Aprenda a controlar la dirección, alineación y espaciado de los elementos tanto horizontal como verticalmente, así como a personalizar elementos flex individuales para lograr diseños precisos.

Aprenda a mejorar el atractivo visual de sus páginas web con CSS. Explore técnicas para aplicar colores y fondos de imagen, estilizar imágenes, utilizar pseudo-elementos decorativos y agregar sombras para crear diseños impactantes.

Trabajando con Elementos en Línea

Awesome!

Trabajando con Elementos en Línea