Teoría
Teoría

Cajas en línea

Las cajas en línea se comportan de forma opuesta a las de bloque. Se colocan una después de otra en una misma línea y pueden dividirse en fragmentos que ocupan varias líneas:

Cajas en línea

Características de las cajas en línea:

No hay saltos de línea antes ni después de la caja.
Su tamaño depende del contenido. Las propiedades width y height no cambian las dimensiones de estas cajas de texto en línea.
El relleno y los márgenes horizontales cambian la separación entre estas cajas.

Algunas etiquetas que generan cajas en línea de forma predeterminada son <a>, ,  y .

Estas etiquetas sirven para dar formato a frases cortas y palabras sueltas.

En cambio, las etiquetas que generan cajas de bloque sirven para marcar bloques grandes de texto, como títulos, párrafos y listas, y para distribuir los elementos de una página.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Cajas en línea</title> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Cajas en línea</h1> Las cajas en línea no crean saltos de línea antes ni después. Se colocan en una línea de izquierda a derecha. Si una caja en línea no cabe en una sola línea, entonces esta puede dividirse y continuar en la siguiente. </body> </html>

CSS

p, div, h1, h2 { margin: 20px; padding: 10px; }

ObjetivosRealizado

Añade dos elementos em con texto a la página.
Añade también dos elementos span con texto.