Teoría
Teoría

Cajas de bloque

A cada elemento HTML de una página le corresponde un área rectangular. Estas áreas se llaman cajas. Los tipos más comunes son las cajas de bloque y las cajas en línea.

Una caja de bloque es un área rectangular que no se divide en fragmentos. Elementos como los títulos y los párrafos generan cajas de bloque de forma predeterminada:

Cajas de bloque

Las cajas de bloque tienen estas características:

Hay un salto de línea antes y después de la caja.
Se les puede asignar ancho, alto, relleno y márgenes.
Ocupan todo el espacio horizontal disponible.

Algunas etiquetas que generan cajas de bloque de forma predeterminada son <p>, <h1>, <h2> y <ul>.

Otra etiqueta importante que genera una caja de bloque es <div>. Representa simplemente un «bloque» o «contenedor rectangular». Se usa con frecuencia para distribuir elementos en una página.

También hay tipos de cajas más complejos. Los veremos más adelante en este capítulo.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Cajas de bloque</title> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Tipos de cajas</h1> <div> <h2>De bloque</h2> <h2>En línea</h2> </div> </body> </html>

CSS

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

ObjetivosRealizado

Añade dos elementos <p> a la página.
Añade también dos elementos <div>.